Sticky Headers

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在实际业务中经常碰到页头固定在浏览器的顶部,而在移动端上使用position:fixed坑多难搞。记得EFE团队分享过一篇《Web移动端Fixed布局的解决方案》博文,就是介绍如何解决移动端上实现页头固定的技术方案。除了文章中介绍的方案之外,@Brad Frost也推荐了几个JavaScript的解决方案,比如iScroll 4Scrollability。使用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的相关资源也可以阅读下面几篇文章:

当然也有对应的Polyfill。比如这个这个。不过@Jeff Wainwright前几天在CSS-Tricks网站上分享了一篇文章使用Stickybits来替换position:sticky的Polyfills方案:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/sticky-headers.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部