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

我想将页脚修复到浏览器窗口的底部，但只限于用户已位于页面最底部的情况。仅当滚动到底部时才将页脚固定到底部

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

但是，如果您的页脚未固定在底部，则必须向下滚动页面以查看页脚，当用户滚动到底部并滚动超过该限制时，会出现更多背景颜色在看起来相当糟糕的页脚下面。因此，如果我能够在发生这种情况时修复页脚，那么在滚动页面限制时，它的行为完全像总是固定的页眉。

这就是我想要改变的 - 滚动页面后通知白色出现在页脚下方。如果页脚固定在底部，则不会发生，而是在页脚上方添加空格。

demonstration

这是我想要得到的东西 - 注意页脚不低于其上添加了更多的黄色。我只是想这样做，但我不希望页脚总是固定的 - 它应该静态定位，以便在它们滚动到底部之前不可见，然后一旦它位于底部，就应该固定以获得所需的页面限制滚动行为。当然，滚动备份应该再次静态定位。

JSBin Code
enter image description here

这是为position:sticky工作？我更喜欢JavaScript/jQuery中的纯CSS解决方案。

来源

2014-10-29 Joey

您将需要使用Javascript/jQuery的，为了做到这一点，你需要一个脚本来取决于有多少为了向下滚动用户完成这个效果 – 2014-10-29 06:03:56

添加和删除类'位置：sticky'会真棒与工作，[但它基本上没有值得提及的浏览器支持]（http://caniuse.com/#feat=css-sticky）:( – misterManSam 2014-10-29 07:01:38

@misterManSam考虑到Safari是唯一有此行为的浏览器，并且'位置：sticky是在Safari（'-webkit'）中支持的，这很好，如果可以用来获得所需的行为，我更喜欢使用它。我只看到它用于为段 – Joey 2014-10-29 14:35:02

这应该工作...！祝你好运！！

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

来源

2014-10-29 17:09:43

这似乎将页脚静态放置在浏览器窗口的底部，因此它会覆盖主体内容，然后在滚动时它不会移动，因此页脚不会位于页面的底部。你有没有一个例子，这个代码可以根据需要工作？ – Joey 2014-10-29 17:15:03

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

回答

相关问题