粘性定位之CSS （ position: sticky ）实现

前言

在项目中，我们常常会碰上这么个效果，就是当页面滚动时，我们要使某个元素（如导航栏、侧边栏、表态之类的）滚动到指定的位置不再滚动。要想实现这个效果，就得用到接下来所讲述的粘性定位。

实现方法

常见的实现粘性定位的方法有两种

1. 使用 CSS 属性 position: sticky实现
1. 使用 JavaScript 监听滚动事件实现

本文将主要讲述一下怎么利用position: sticky来实现粘性定位

CSS 属性 `position: sticky`实现粘性定位

步骤

确定粘性元素，给其添加position: sticky属性
确定触发粘性行为的位置，即你希望它滚动到哪个位置不再滚动，如top:0;（注意：这里的top:0;是相对于离该元素最近的具有滚动条的祖先元素，一般是视窗）

注意事项

父元素的overflow属性 ：如果粘性元素的任何父级元素设置了overflow: hidden、overflow: scroll或overflow: auto属性，那么position: sticky;可能不会生效。请确保粘性元素的所有父级元素没有这些overflow设置。
祖先元素的高度限制：如果粘性元素的任何祖先元素具有固定的高度或最大高度，并且该元素的内容高度超出了这个限制，粘性布局可能也不会生效。
兼容性问题 ：虽然现代浏览器普遍支持position: sticky;，但在一些旧版本的浏览器中仍然可能存在兼容性问题。确保您的浏览器版本支持粘性定位。
Z-index问题 ：在某些情况下，如果页面上其他元素的z-index较高，可能会覆盖或影响粘性元素的可见性。
何时失效：当粘性元素的边缘和父元素的临界元素边缘重合时，会随着父元素一起滚走，这时粘性就失效了

如下示例：

html 复制代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        height: 3000px;
    }
    .nav{
        background-color: pink;
        height: 100px;
        width: 100%;
        text-align: center;
        line-height: 100px;
    }
    ul{
        list-style: none;
        text-align: center;   
    }
    li{
        height: 50px;
        width: 100%;
        background-color: #666;
        line-height: 50px;
    }
    .title{
        background-color: rgb(0, 179, 255);
        font-weight: bold;
        position: sticky;
        top: 0px;
    }
</style>
<body>
    <div class="nav">
        <span>头部</span>
    </div>
    <div class="content">
        <ul>
            <li class="title">内容一</li>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <ul>
            <li class="title">内容二</li>
            <li>d</li>
            <li>e</li>
            <li>f</li>
        </ul>
        <ul>
            <li class="title">内容三</li>
            <li>g</li>
            <li>h</li>
            <li>i</li>
        </ul>
    </div>
</body>

效果

滚动之前粘性元素到达指定位置，即top: 0; 粘性元素边缘和父元素的临界元素边缘重合，粘性元素随着父元素滚走

粘性定位之CSS （ position: sticky ）实现

前言

实现方法

CSS 属性 position: sticky实现粘性定位

CSS 属性 `position: sticky`实现粘性定位