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

初窥 position:sticky

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

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

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

html部分

        <div class="con">
            <div class="samecon">
            <h2>标题一</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
            <div class="samecon">
            <h2>标题二</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
            <div class="samecon">
            <h2>标题三</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
            <div class="samecon">
            <h2>标题四</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
            <div class="samecon">
            <h2>标题五</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
            <div class="samecon">
            <h2>标题五六</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            </div>
        </div>

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

image