Question

尝试使用两个菜单复制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});
    });
});

以下是构建网站的链接。 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});
    }); 
});

具有底限的jQuery Floating Div

1 个答案: