jquery - 具有垂直约束的 float 滚动 Div

Question

我的目标是沿着 http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ 中的示例进行操作

但是我想将 float div 限制在另一个父 div 内。

例如

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

我希望菜单 div float 在上面的浅灰色框中，但它不应该超出其中。

我见过的 float div 的任何示例都只是简单地基于它们在窗口顶部或底部的位置。有没有人尝试过像上面那样做？

谢谢。

Answer 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});  
    });  
});   

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

希望有帮助。 乔什