在实际业务中经常碰到页头固定在浏览器的顶部，而在移动端上使用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方案：