当滚动到底部时，将页脚固定在底部

Question

当滚动到底部时，将页脚固定在底部

4

我想把我的页脚固定在浏览器窗口底部，但只有在用户已经滚动到页面底部的情况下才这样做。

如果您在iOS 8或OS X Mavericks/Yosemite中使用Safari进行滚动，当您滚动超过页面限制时会显示更多内容以获得弹性反弹效果。当您有一个固定的标题时，它看起来非常棒，它只会在您的页面顶部显示更多的背景，而标题完全固定，就像原生应用程序一样。

但是，当您有一个没有固定在底部的页脚时，他们必须向下滚动页面才能看到页脚，当用户滚动到底部然后滚动超过该限制时，将会出现更多的背景颜色出现在页脚下面，看起来相当糟糕。因此，如果我能够在发生这种情况时修复页脚，它将与始终固定的标题在滚动超过页面限制方面的行为完全相同。

这就是我想要改变的 - 请注意，在滚动到页面末尾后，白色会出现在页脚下面。如果页脚固定在底部，这种情况就不会发生，而是会在页脚上方添加空白。

demonstration

这是我想要的 - 在页脚上方添加更多黄色通知，而不是在页脚下方。我只想要这个效果，但我不想让页脚始终固定 - 它应该被静态定位，直到用户滚动到底部，然后一旦到达底部，它就应该变成固定的，以实现所需的页面限制滚动行为。当然，向上滚动应该再次将其定位为静态。

这是否适合使用 "position:sticky"？我希望使用 CSS-only 的解决方案，而不是 JavaScript/jQuery。 JSBin Code enter image description here

- Jordan H

你需要使用JavaScript/jQuery来实现这个功能，你需要编写一个脚本来根据用户滚动的距离添加或删除类以实现这种效果。 - Chun

1

position: sticky 很棒，但是它基本上没有值得一提的浏览器支持 :( - misterManSam

考虑到Safari是唯一具有这种行为的浏览器，而且position:sticky在Safari（-webkit）中得到支持，如果可以用它来实现所需的行为，那就很好了，我更愿意使用它。我只看到过它被用于将部分标题固定在顶部。 - Jordan H

太棒了！如果我理解正确的话...你想要类似于这个例子的东西吗？(http://jsbin.com/fuxuhatevo/1) - misterManSam

@misterManSam，你正在使用旧版的Safari，版本低于7.1。请注意，灰色背景出现在页面下方。最近这一点已经改变了，现在会显示更多网页内容而不是Safari UI在页面下方。 - Jordan H

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rushabh Shah · Answer 1

这应该可以运行...!! 祝你好运 !!

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html 

#footer 
{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}