移动页脚，当您到达终点时消失

Moving footer that disapears when you Reach the End

本文关键字：终点 消失 移动      更新时间：2023-09-26

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

谢谢 

$(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/

你真的应该发布一些代码，这样人们就能看到你想要实现的目标。

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

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

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

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

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

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

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

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

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

相关文章：