position : sticky

　　最近很喜欢去青蛙网（其实是CSS-TRICKS*，因为有只可爱的青蛙，所以我经常叫它青蛙网），因为我发现我居然可以把文章看懂了，接着这几天都上去逛逛，增加增加一下它的点击率，嘻嘻。

　　看到一篇题目为position：sticky的文章，觉得奇怪，因为position：static|absolute|relative|fixed|inherit，没有这个sticky这个值啊，然而，对于新事物的好奇，我就点开这篇文章，最后文章外链到google的html5 rocks专题那儿：http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

　　细读了一下这篇文章，接着我眼前发亮，这个值可以实现那个滚动滑轮，接着滑到某一层的顶部时，那一层就粘在了顶部这个效果。想当年实现这个效果，还问了很多人呢，还要解决一大堆兼容性问题，结果现在居然一句CSS语句就搞掂了，太神了。但是，本想亲自写一个demo实现看效果时，发现这个属性值要chrome 23.0.1247.0+ 才能有效果。现在我的chrome才21。希望各个浏览器都能快速发展起来啦。

　　写法：

　　.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 15px; } 

　　元素一开始以position：relative表现，但当用户滚动到距离top 15px时，元素就会变成position：fixed。

　　以前的实现方法：使用scroll事件

　　截取文章的实现方法

　　<style>

　　.sticky {

　　　　position: fixed; top: 0;

　　 }

　　.header {

　　　　width: 100%;

　　　　background: #F6D565;

　　　　 padding: 25px 0;

　　 }

　　</style>

　　<div class="header"></div>

　　<script>

　　　　var header = document.querySelector('.header');

　　　　var origOffsetY = header.offsetTop;

　　　   function onScroll(e)

　　　　 {

　　　　　　window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky');  //说真的第一次知道有classList这个方法


　　　　 }

　　　　 document.addEventListener('scroll', onScroll);

　　　　</script>

　　不过这个方法在IE9下还行不通。

　　稍微修改了一下，终于IE9可以了。

　　　　var header=document.querySelector(".dd");
            var origOffsetY=header.offsetTop;
            var name=header.className;
            var me=name.replace(" sticky","");
            function onScroll(e){
                //console.log(document.documentElement.scrollTop+" "+origOffsetY);
                if(window.scrollY){
                    window.scrollY>=origOffsetY?header.className+=" sticky":
                    header.className=me;
                }
                else{
                    document.documentElement.scrollTop>=origOffsetY?header.className+=" sticky":
                    header.className=me;
                }
            }
            document.addEventListener('scroll',onScroll);

　　使用JS来实现这个方法，其实不是很好，但局限于没有其他技术所以才用该方法，因为使用scroll事件的话，就是每滚动鼠标都要监听，都要调用该函数，花费还是有点大，然而当上述的position ： sticky可以使用的话，那就该多好呀。。

转载于:https://www.cnblogs.com/zhuyingyan/archive/2012/09/04/2671169.html