使用CSS实现滚动吸附效果
<p>基本原理</p><p>利用CSS的position: sticky属性来让元素在滚动到特定位置时“吸附”在某个可视区域边界（如顶部、底部、左侧或右侧）。</p>
<p>3种常见应用场景</p>
<p>1.吸顶效果</p>
<p>html部份：</p>
<pre><code><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>
</code></pre>
<p>css部份：</p>
<pre><code> 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;}
</code></pre>
<p>2.列表标签吸附顶部</p>
<p>html部份：</p>
<pre><code><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>
</code></pre>
<p>css部份：</p>
<pre><code>.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; }
</code></pre>
<p>3.横向无缝滚动吸附</p>
<p>html部份</p>
<pre><code><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>
</code></pre>
<p>CSS部份</p>
<pre><code>.ads-position {
overflow: auto;
position: relative;
width: 400px;
height: 280px;
outline: 1px solid #3c9; }
.ads-position ul {
padding: 200px 0; }
.ads-position li {
position: sticky;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff; }
.ads-position li:nth-child(1) {
top: 0;
z-index: 9;
background-color: #f66; }
.ads-position li:nth-child(2) {
top: 40px;
z-index: 9;
background-color: #66f; }
.ads-position li:nth-child(3) {
background-color: #f90; }
.ads-position li:nth-child(4) {
bottom: 0;
z-index: 9;
background-color: #09f; }
.ads-position li:nth-child(5) {
bottom: 40px;
z-index: 9;
background-color: #3c9; }
</code></pre>
<p>除了用css的sticky属性外 还有很多种方式都可以实现此效果 例如 <strong>CSS 的Scroll Snap属性或者是固定定位</strong>fixed都可以实现 哦！这里就不一一展示了 感兴趣的小伙伴可以自行尝试一下！****</p>
页:
[1]