javascript - 到达终点时消失的移动页脚

Question

好的，我的老板只是要求做一个移动的页脚（除了原来的静态页脚），当你向下滚动时它会随着页面移动，然后在你到达页面底部时消失，我不知道有什么建议吗？

谢谢

Answer 1

$(window).scroll(function () {
   if ($(window).scrollTop() + $(window).height() == $(document).height()) 
       $(".footer").css({"display": "none"});
   else if (!$(".footer").is(":visible"))
       $(".footer").css({"display": "block"});
});

.footer {
 position:fixed; height:20px; width:100%;
 background:blue; bottom:0; left:0;  z-index:1;
}

http://jsfiddle.net/4WWhf/1/

Answer 2

您确实应该发布一些代码，以便人们可以看到您要实现的目标。

尝试使用固定页脚将其锁定到屏幕上。

.Footer {
    position: fixed;
    bottom: 0;
 }

当您希望它不再被固定时，使用 javascript 将其更改为绝对位置。我无法向您展示代码建议，因为我不知道您的最终目标。

Answer 3

您可以设置 CSS 以将页脚放置在固定位置：

#footer {
    position:fixed;
    bottom:0px;
    left:0px;
}

然后使用 jQuery 确定何时到达页面底部。

$(window).scroll(function(){ 
    if($(window).scrollTop() == ($(document).height() - $(window).height())) $("#footer").fadeOut();
})

如果您需要考虑不滚动的页面，则需要额外的逻辑。

但如果你能解释更多你的最终目标，甚至向我们展示，那会很方便吗？