Javascript jQuery带底部限制的浮动Div

尝试用两个菜单复制mashable效果。我得到了滚动效果的工作，但我正在寻找效果停止在页脚顶部。我在想我可以做一个有限制的条件语句，但我不知道如何实现它

这是我正在使用的javascript

var name = ".floater";
var menuYloc = null;

jQuery(document).ready(function($) { 
    menuYloc = parseInt(jQuery(name).css("top").substring(0,jQuery(name).css("top").indexOf("px")))
    jQuery(window).scroll(function () { 
        offset = menuYloc+jQuery(document).scrollTop()+"px";
        jQuery(name).animate({top:offset},{duration:500,queue:false});
    });
});

这里是构建站点的链接

---

提前感谢。

使用jquery的

.offset

查找页脚位置在页面中的位置，然后使用菜单的顶部位置+其高度确定其是否位于页脚位置或其附近，如果位于页脚位置则停止

#Footer和$Menu分别是Footer和Menu的id，它们明显地改变了它们的属性

编辑：上一个示例无法正确处理小窗口高度，此示例应该

jQuery(document).ready(function($) 
{ 
    menuYloc = parseInt(jQuery(name).css("top").substring(0,jQuery(name).css("top").indexOf("px")))
    jQuery(window).scroll(function () {
        var contentHeight = jQuery("#content").height();
        var menuHeight = jQuery(".floater").height();

        offset = menuYloc+jQuery(document).scrollTop();
        if( (offset+menuHeight) > (contentHeight - menuHeight) )
            offset =  (contentHeight - menuHeight);              

        jQuery(name).animate({top:offset+"px"},{duration:500,queue:false});
    }); 
});

---

您可能需要使用菜单顶部的偏移量，而不是css顶部值。我刚刚测试了你的页面，如果浏览器窗口高度较短，菜单仍然会超出页脚。将示例编辑为oen，并在你的网站上以较小的窗口高度进行测试，效果良好。