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

Posted 2023-02-25

【中文标题】仅在滚动到底部时将页脚固定到底部

【英文标题】：Fix a footer to the bottom only when scrolled to the bottom

【发布时间】：2014-12-24 18:15:06

【问题描述】：

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

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

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

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

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

JSBin Code

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

【问题讨论】：

您需要 JavaScript/jQuery 才能做到这一点，您需要一个脚本来添加和删除类，具体取决于用户向下滚动的程度以实现此效果

position: sticky 和but it has basically no browser support worth speaking of 一起工作会很棒 :(

@misterManSam 考虑到 Safari 是唯一具有此行为的浏览器，并且 Safari (-webkit) 支持 position:sticky，这很好，如果可以使用，我更愿意使用它获得所需的行为。我只看到它用于在顶部粘贴标题。

太棒了！所以如果我理解正确......你想要一些东西like this example?

谢谢@misterManSam！不幸的是，这仍然表现得好像 position 没有改变。我将发布一个 gif - 请注意黑色页脚下方有白色，当我想更改它时，您永远不会看到它下面的白色，而是在页脚上方添加更多的白色。

【参考方案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');

【讨论】：

这似乎将页脚静态放置在浏览器窗口的底部，因此它会覆盖正文内容，然后在滚动时它不会移动，因此页脚不会位于页面底部.您是否有此代码按需要工作的示例？