软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

Sticky Headers

在实际业务中经常碰到页头固定在浏览器的顶部,而在移动端上使用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的相关资源也可以阅读下面几篇文章:

Specificationgeddski article: Examples and GotchasHTML5RocksMozilla Developer Network (MDN) documentation - CSS positionWebPlatform DocsIE platform status: Preview ReleaseChrome platform status: WebKit platform status: Supported

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