javascript - 具有底部限制的 jQuery float Div

Question

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

这是我正在使用的 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});
    });
});

这是构建站点的链接。 http://host.philmadelphia2.com/~chill/about/

提前致谢。

Answer 1

使用jquery的.offset找到页脚位置在页面中的位置，然后使用菜单的顶部位置+它的高度来确定它是否在或接近页脚位置，如果是则停止.

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