html - 仅当滚动到底部时才将页脚固定到底部

Question

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

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

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

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

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

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