使用CSS实现滚动吸附效果

基本原理

利用CSS的  position: sticky  属性来让元素在滚动到特定位置时“吸附”在某个可视区域边界（如顶部、底部、左侧或右侧）。

3种常见应用场景

1.吸顶效果

html部份：

<header> 
    <h1>网页头部</h1>
</header>

<main>  
    <section id="section1">  <h2>内容区域1</h2> <p>这里是一些文本内容......</p> </section>
     
    <section id="section2"> <h2>内容区域2</h2>  <p>这里是一些文本内容......</p> </section>
     
    <section id="section3">  <h2>内容区域3</h2> <p>这里是一些文本内容......</p> </section>
    
</main>

css部份：

header {
    position: sticky;
    top: 0;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    z-index: 1;
}

main {
    padding: 20px;
}

section {
    height: 500px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding: 20px;
}

2.列表标签吸附顶部

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>
</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: 010px;
    border-bottom: 1px solid #ccc;
}

3.横向无缝滚动吸附

html部份

<div class="ads-position">
    <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
    </ul>
</div>

CSS部份

.ads-position {
    overflow: auto;
    position: relative;
    width: 400px;
    height: 280px;
    outline: 1px solid #3c9;
}

.ads-positionul {
    padding: 200px 0;
}

.ads-positionli {
    position: sticky;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.ads-positionli:nth-child(1) {
    top: 0;
    z-index: 9;
    background-color: #f66;
}

.ads-positionli:nth-child(2) {
    top: 40px;
    z-index: 9;
    background-color: #66f;
}

.ads-positionli:nth-child(3) {
    background-color: #f90;
}

.ads-positionli:nth-child(4) {
    bottom: 0;
    z-index: 9;
    background-color: #09f;
}

.ads-positionli:nth-child(5) {
    bottom: 40px;
    z-index: 9;
    background-color: #3c9;
}

除了用css的sticky  属性外 还有很多种方式都可以实现此效果 例如 CSS 的Scroll Snap属性  或者是固定定位fixed  都可以实现 哦！这里就不一一展示了 感兴趣的小伙伴可以自行尝试一下！