css粘性定位position:sticky

前言：

        css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时

(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

***注意，这个兼容性特别不好

效果图：

基本用法：

nav{
  position:sticky;
  top:10px; /* 阈值 */
}

top/bottom属性

top,bottom的距离阈值取决于最近一个overflow是hidden scroll auto或 overlay 的祖先元素（并不是相对于viewport 视口）。

例如我们设置top:100px时，在元素滚动到距离祖先元素顶部小于设置的top:100px之前，元素为相对定位。当滚动到超过或等于top:100px时，元素将固定在与祖先元素顶部距离 top:100px 的相对位置，直到距离回滚到阈值以下。

根据下面的例子，我们可以看到position:sticky元素设置的top值是最近一个设置了overflow的祖先元素的距离，当它滚到距离低于其值时将固定在视口当中，此时该元素的效果就为固定定位。

总结

1. top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。
2. 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。
3. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
4. 父元素的高度不能低于sticky元素的高度。

兼容：

  position: -webkit-sticky;
  position: sticky;

案例代码：（可运行）

	
	




  

    
顶部高200px 红线为中线
    
这是导航 top:100px
	    
滚一个
	    
滚一个
	    
滚一个
	    
滚一个
	     
滚一个
	      
滚一个
	       
滚一个
	        
滚一个
	         
滚一个
	          
滚一个
	           
滚一个
	            
滚一个
	             
滚一个
	              
滚一个
	               
滚一个
			
滚一个
	       
滚一个
	        
滚一个
	         
滚一个
	          
滚一个
	           
滚一个
	            
滚一个
	             
滚一个
	              
滚一个
	               
滚一个
	                
滚一个
	                 
滚一个
	                  
滚一个
	                   
滚一个
	                    
滚一个




	    
到底啦！
  

更多资料：

https://www.jianshu.com/p/b72f504121f5

https://blog.csdn.net/qq_35585701/article/details/81040901