特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在实际业务中经常碰到页头固定在浏览器的顶部,而在移动端上使用position:fixed
坑多难搞。记得EFE团队分享过一篇《Web移动端Fixed布局的解决方案》博文,就是介绍如何解决移动端上实现页头固定的技术方案。除了文章中介绍的方案之外,@Brad Frost也推荐了几个JavaScript的解决方案,比如iScroll 4和Scrollability。使用fixed
是一种固定页头的,但很多时候是希望实现Sticky Header的效果,说到这里大家可能会想起position
新增的属性值sticky
。虽然这个能实现我们想要的效果,但这个属性的支持性还是需要等待一段时间。
sticky正常的使用方法
position:sticky
正常的使用方法,非常的简单:
<div class="header">Sticky Headers</div>
.sticky {
position: sticky;
top: 15px;
}
元素sticky
距离浏览器顶部15px
,该元素就固定在那了。很多时候这个配合JavaScript的scroll
事件一起使用。
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll, false);
看上去是不是非常的简单。刚才也说了,sticky
的支持度还是需要等待一段时间。可以通过caniuse.com来查阅。
有关于position:sticky
的相关资源也可以阅读下面几篇文章:
- Specification
- geddski article: Examples and Gotchas
- HTML5Rocks
- Mozilla Developer Network (MDN) documentation - CSS position
- WebPlatform Docs
- IE platform status: Preview Release
- Chrome platform status:
- WebKit platform status: Supported
当然也有对应的Polyfill。比如这个和这个。不过@Jeff Wainwright前几天在CSS-Tricks网站上分享了一篇文章使用Stickybits来替换position:sticky
的Polyfills方案:
如需转载,烦请注明出处:https://www.w3cplus.com/css/sticky-headers.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!