CSS新特性position:sticky 实现粘性布局

初窥 position:sticky

sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。

当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

运用position:sticky 实现头部导航栏固定

html部分

        

            

            
标题一
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
            

            
标题二
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
            

            
标题三
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
            

            
标题四
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
            

            
标题五
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
            

            
标题五六
            
这是一段文本
            
这是一段文本
            
这是一段文本
            
        

css部分

            .samecon h2{
              position: -webkit-sticky;
                position: sticky;
                top: 0;
                background:#ccc;
                padding:10px 0;
            }

生效规则

• 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
• 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效
• top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高

兼容性
[图片上传失败...(image-ed90c4-1520582380583)]
效果图
距离页面顶部大于20px，表现为 position:relative;

image

距离页面顶部小于20px，表现为 position:fixed

image