使用 position: sticky 达到粘性元素区域悬浮效果

在一些很长的表格中，常常会使用表头悬浮的设计以方便阅读，即在表格离开窗口之前，表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素，也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。

这种效果一直以来需要通过 JavaScript 实现。不过就在去年，这项结合了 Relative （在屏幕中时） 和 Fixed （移出屏幕时） 的样式效果被提案添加到了 CSS3 中。下面是一个示例：

Html代码  

1. .sticky {  
2.     position: -webkit-sticky;  
3.     position: -moz-sticky;  
4.     position: -ms-sticky;  
5.     position: sticky;  
6.     top: 15px; // 使用和 Fixed 同样的方式设定位置  
7. }  

因为这个样式尚未进入标准，还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式：

一个不错的选择是使用 jQuery Pin 这个方便的 jQuery 脚本，支持简单的 Pin 元素、在容器范围内 Pin （例如 Table 内 Pin 住 Th）、在一定尺寸下禁用的功能。

如果要使用原生 JS 实现，可以参照下面的代码：

Html代码  

1. <style>  
2. .sticky {  
3.     position: fixed;  
4.     top: 0;  
5. }  
6. .header {  
7.     width: 100%;  
8.     background: #F6D565;  
9.     padding: 25px 0;  
10. }  
11. </style>  
12.   
13. <div class="header"></div>  
14.   
15. <script>  
16. var header = document.querySelector('.header');  
17. var origOffsetY = header.offsetTop;  
18. function onScroll(e) {  
19.     window.scrollY >= origOffsetY ? header.classList.add('sticky') :  
20.                     header.classList.remove('sticky');  
21. }  
22. document.addEventListener('scroll', onScroll);  
23. </script>  

 完整代码：

Html代码  

1. <style>  
2.   body {  
3.     margin: 0;  
4.     text-align: center;  
5.     font-family: sans-serif;  
6.   }  
7.   .fixed {  
8.     position: fixed;  
9.     top: 0;  
10.   }  
11.   .sticky {  
12.     width: 100%;  
13.     background: #F6D565;  
14.     padding: 25px 0;  
15.     text-transform: uppercase;  
16.   }  
17. </style>  
18.   
19. <p style="margin-bottom:100px;">Scroll this page.</p>  
20. <div class="sticky"><h3>Super amazing header</h3></div>  
21. <p style="margin-top:500px;">Still there?</p>  
22. <p style="margin-top:500px;">Yep!</p>  
23. <p style="margin-top:500px;">Scroll so hard!</p>  
24. <script>  
25. var sticky = document.querySelector('.sticky');  
26. var origOffsetY = sticky.offsetTop;  
27.   
28. function onScroll(e) {  
29.   window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :  
30.                                   sticky.classList.remove('fixed');  
31. }  
32.   
33. document.addEventListener('scroll', onScroll);  
34. </script>  

延伸阅读

---

▶ Walkthrough007