position:sticky 是 css 定位新增属性，可叫做粘性定位；可以说是static（默认值没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如 top：100px )； position:sticky 这时的效果相当于 fixed 定位，固定到适当位置

在我讲 sticky 定位之前，我先说一下position定位的其他值

fixed： 生成固定定位的元素，相对于浏览器窗口进行定位，脱离文档流（老IE不支持）

z-index 声明）。

inherit： 规定应该从父元素继承 position 属性的值。

现在新增了粘性定位属性：sticky；

1. sticky 的使用：

#sticky-nav {
    position: sticky;
    top: 100px;
}
复制代码

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

1. 父元素不能overflow:hidden或者overflow:auto属性。
2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3. 父元素的高度不能低于sticky元素的高度
4. sticky元素仅在其父元素内生效

2. 例子：

CSS代码

 <style>        
    *{            
        padding: 0;            
        margin: 0;        
    }       
    html,body{           
        height: 100vh;           
        width: 100%;       
    }       
    h1{           
        height: 200px;           
        position: relative;           
        background-color: lightblue;       
    }       
    h1:after{           
        content: "";           
        position: absolute;           
        top: 100px;           
        left: 0;           
        width: 100%;           
        height: 2px;           
        background-color: red;       
    }       
    #sticky-nav{           
        position: sticky;           
        /* position: relative; */           
        /* position: absolute; */           
        top: 100px;           
        width: 100%;           
        height: 80px;           
        background-color: yellowgreen;       
    }       
    .scroll-container{           
        height: 600px;           
        width: 100%;           
        background-color: lightgrey;       
    }    
</style>复制代码

HTML 代码：

<h1>高100px，距离顶部100px</h1>
<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px</div>
<p class="scroll-container">发生滚动</p>
<p class="scroll-container" style="background: lightgoldenrodyellow;">发生滚动</p>复制代码

效果：

动态的效果大家自行复制代码查看。

3. 各大内核对 position:sticky 的支持情况