实现滚动列表时，每块区域的标签自动吸附在顶部

目录

前言

原理

如何实现

效果展现

---

前言

之前比方说做通讯录，要实现页面往下滚动时，始终要在滚动区域的顶部固定显示该区域属于什么字母开头的标签，然后滚动到下一个字母区域，切换显示下一个字母。我都是用js来判断并实现的，特别麻烦。今天刷抖音时看到实现这一个效果的视频，发现只要css就能实现，遂测试并记录下来

原理

以下摘自菜鸟教程：

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

本人理解：

给需要置顶的div设置：position: sticky;top:0;   那么当列表滚动时，它就会实现置顶效果；而当它的父元素即将滚动出祖先元素的范围时，它会取消置顶效果，跟随父元素向上滚动。

当然它的祖先元素就需要设置overflow、overflow-y：auto、scroll，否则无法实现该效果

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

如何实现

HTML：

<div class="main">
      <dl>
        <dt>这是标签A</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签B</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签C</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签D</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签E</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
      <dl>
        <dt>这是标签F</dt>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
        <dd>标签栏粘贴效果</dd>
      </dl>
    </div>

css：

.main{
        position: fixed;
        width: 80%;
        height: 70vh;
        top: 50px;
        left: 50%;
        transform: translate(-50%,0);
        overflow-y: scroll;
      }
      dl{
        border: 1px solid #ccc;
      }
      dt{
        position: sticky;
        top: 0;
        color: white;
        background-color: rgb(53, 50, 50);
      }
      dd,dt{
        padding: 0 10px;
        border-bottom: 1px solid #ccc;
      }

效果展现

开始滚动前：

 滚动后：

 

A标签即将离开区域：