CSS3： 粘性布局position: sticky

概念

position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。
粘性定位可以被认为是相对定位和固定定位的混合
元素在跨越特定位偏移之前为相对定位，之后为固定定位

示例1：左侧滑动，右侧固定

效果演示

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>一侧固定一侧滚动</title>  
    <style>
      * {
         margin: 0;
         padding: 0;
        }
      .box {
         width: 80%;
         margin: 0 auto;
        }
      .clearfix::after {
         content: "";
         display: block;
         overflow: hidden;
         clear: both;
        }
      .conetnt {
         padding: 2%;
         border: 1px solid #eee;
         margin-bottom: 50px;
         box-sizing: border-box;
        }
      .left {
         height: 3000px;
         width: 60%;
         margin: 0 2%;
         float: left;
         background-color: pink;
        }
      .right {
         /* height: 1000px; */
         width: 35%;
         float: right;
         background-color: purple;
         /*对右边的内容使用粘性定位*/
         position: sticky;
         /* top: -220px; */
        }
      .footer {
         width: 100%;
         height: 300px;
         background-color: #000;
         color: #FFFFFF;
        } 
     </style> 
   </head> 
   <body> 
     <div class="box">  
       <div class="conetnt clearfix">
          <div class="left">
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>  
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> 
             wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br> wwwwwww<br>       
             wwwwwww<br> 
         </div>  
         <div class="right"> 
            q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> 
            q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> 
            q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> 
            q<br> q<br> q<br> q<br> q<br> q<br> q<br> q<br> 我是最后一行<br>  
         </div> 
      </div> 
      <div class="footer"> 我是页脚 </div>  
    </div> 
   </body> 
 </html> 
 <script>
    //获得页面卷曲的内容
   //获得浏览器的内部高度
   let ScreenTop = window.innerHeight;
   //获取滚动元素的高度
   let divTop = document.querySelector(".right").offsetHeight;
   let tops = divTop - ScreenTop + 20;
   console.log("tops", tops);
   if (tops <= 0) {
     document.querySelector(".right").style.top = 0 + "px"
   } else {
     document.querySelector(".right").style.top = -tops + "px"
   } 
</script>

示例2：某行文字滑动到顶部后，固定不动，可用来做吸顶效果

<style>
    *{margin:0;padding:0;}div{margin:20px;height: 20px;line-height: 30px;}
</style>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<p id="target" style="top: 40px;background-color: blueviolet;color: #fff;width: 120px;">粘性布局的文字</p>
</div>
<div>这是一行文字</div>
<div>这是一行文字</div>
<div>这是一行文字</div>

参考文章：https://www.cnblogs.com/zsxblog/p/15651093.html