Question

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

的示例

但是我想在另一个父div中约束浮动div。

E.g。

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

我想在上面的浅灰色框中浮动一个菜单div，但它不应该从它外面移出。

我在浮动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});  
    });  
});

所有这一切都是检查计算的offeset是否大于你的最大值，如果它更大，那么只需将其设置为最大值。

希望有所帮助。约什

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

        });
    });

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

2 个答案: