尝试用两个菜单复制可混搭的效果。我得到了滚动效果,但我一直在寻找停止在页脚顶部的效果。我在想我可以做一个有限制的条件语句,但我不确定如何实现它。
这是我正在使用的 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/
提前致谢。
最佳答案
使用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});
});
});
关于javascript - 具有底部限制的 jQuery float Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4611448/