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

Question

我想将页脚固定在浏览器窗口的底部，但仅限于用户已经位于页面底部的情况。

如果您在 Safari 中的 iOS 8 或 OS X Mavericks/Yosemite 上注意到，当您滚动超过页面限制时，会显示更多内容以获得弹性反弹效果。当你有一个固定的标题时，这看起来真的很棒，它只是在页面顶部上方显示更多背景，而标题完全固定，就像在本机应用程序上一样。

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

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

这就是我想要获得的 - 请注意在页脚上方而不是下方添加了更多黄色。我只想这样，但我不想让页脚始终固定 - 它应该静态定位，以便在滚动到底部之前它不可见，然后一旦它位于底部，它应该变得固定以获得所需的页面限制滚动行为。当然，向上滚动应该再次将其静态定位。

JSBin Code

这是position:sticky 的工作吗？与 JavaScript/jQuery 相比，我更喜欢纯 CSS 解决方案。

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');
}