【问题标题】:Floating Scrolling Div with vertical constraints具有垂直约束的浮动滚动 Div
【发布时间】:2009-12-16 22:03:18
【问题描述】:

我的目标是遵循http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ 的示例

但是我想将浮动 div 限制在另一个父 div 中。

例如

alt text http://img41.imageshack.us/img41/1686/72219115.png

我希望菜单 div 漂浮在上面的浅灰色框中,但它不应该超出它。

我看到的任何浮动 div 示例都只是基于它们在窗口顶部或底部的位置。有没有人尝试过像上面那样做?

谢谢。

【问题讨论】:

  • 你试过了吗?向我们展示代码并解释它是如何失败的。这不是免费的开发商店。

标签: jquery html css


【解决方案1】:

您需要根据您的包装div或固定值定义最大滚动高度(maxscrollvalue)然后修改代码如下:

$(document).ready(function(){  
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  
    $(window).scroll(function () {   
        var offset = menuYloc+$(document).scrollTop()+"px";  
        //new code here
        if(offset > maxscrollvalue){
            offset = maxscrollvalue;
        }
        $(name).animate({top:offset},{duration:500,queue:false});  
    });  
});   

它所做的只是检查计算出的偏移量是否大于您的最大值,如果大于则将其设置为最大值。

希望对您有所帮助。 乔什

【讨论】:

  • 像素问题offsetN = menuYloc+$(document).scrollTop() var maxscrollvalue = 620; if(offsetN > maxscrollvalue){ offsetN = maxscrollvalue; } offset = offsetN+"px";
  • 嗨乔希。一个问题在您的代码中的哪个位置以及如何计算 maxscrollvalue 的值?谢谢
【解决方案2】:

玩了一会儿后,我开始工作了。

var menu = "#floatMenu";
    var menuYloc = null;

    $(document).ready(function(){

        var containerTop = $("#container").position().top;
        var containerLeft = $("#container").position().left;
        var containerHeight = $("#container").innerHeight();
        var menuHeight = $(menu).innerHeight();

        //Position the menu at the top-left of the container div
        $(menu).css('top', containerTop).css('left', containerLeft);

        menuYloc = parseInt($(menu).css("top").substring(0,$(menu).css("top").indexOf("px")))

        $(window).scroll(function () {

            //If the menu is within the container then move it down
            if($(document).scrollTop() > containerTop && $(document).scrollTop() < (containerTop + containerHeight - menuHeight))
            {
                offset = $(document).scrollTop()+"px";
                $(menu).animate({top:offset},{duration:400,queue:false});
            }

        });
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-06-29
    • 2019-04-23
    • 2010-11-04
    • 2011-05-31
    • 2014-08-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多