基本原理
利用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>
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; }
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-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; }
除了用css的sticky 属性外 还有很多种方式都可以实现此效果 例如 CSS 的Scroll Snap属性 或者是固定定位fixed 都可以实现 哦!这里就不一一展示了 感兴趣的小伙伴可以自行尝试一下!****