position：sticky 粘性定位

position：sticky 粘性定位

是结合了position:relative和position:fixed两个功能为一体的组合定位，不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。

<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>

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

使用该属性有几个必要条件：

1、父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。

2、父级元素也不能设置固定的height高度值，否则也没有粘滞效果。

3、同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

4、sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。