使用CSS实现滚动吸附效果

[复制链接]
七夏(UID:1) 发表于 2025-1-2 14:56:38 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×

基本原理

利用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 都可以实现 哦!这里就不一一展示了 感兴趣的小伙伴可以自行尝试一下!****

nbsp, lt, gt, dd
小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!
全部回复0 显示全部楼层
暂无回复,精彩从你开始!

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

管理员
  • 主题

    949
  • 回答

    380
  • 积分

    2579
虚位以待,此位置招租

商务推广

    此位置招租 黑粉猫影院-免费看电影 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租