具有垂直约束的浮动滚动 Div答案

【问题标题】：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});
            }

        });
    });

【讨论】：