关于前端:css黏性定位实现商城的分类滚动的标题吸附

2次阅读

共计 2744 个字符，预计需要花费 7 分钟才能阅读完成。

传统的黏性定位是应用 js 通过计算高度来实现的，当元素滚动到肯定地位时吸附在以后地位。上面咱们通过 css 来实现黏性定位性能。

黏性定位目前支流的浏览器曾经全副反对，顾名思义，黏性定位具备吸附的成果，其实它是 position 的新增属性，语法：position: sticky;开启了黏性定位后，元素会依据 top 值来吸附到父元素的指定地位。

黏性定位的须要理解的中央：
1、黏性定位的元素产生偏移是，元素的原始地位是保留的。
2、如果黏性定位外部有相对定位的子元素，那么该子元素的相对定位是指向产生偏移的地位而不是原地位。
3、黏性定位能够通过 z-index 扭转层叠程序。

上面是黏性定位的一个实现：

<div style="overflow: scroll;height: 500px;margin: 100px;border:1px solid red;">
   <div class="topSticky"> 抽奖流动 </div>
   <div class="emptyChunk" v-for="(item,index) in 6"> 内容：{{index}}</div>
</div>

.topSticky{
    width: 240px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-top: 30px;
    border: 1px solid red;
    background-color: #80c342;
    position: sticky; /* 黏性定位 */
    top: 0;  /* 具体父级元素吸附的间隔 */
    
}
.emptyChunk{
    height: 200px;
    width: 240px;
    border: 1px solid green;
}

如果父级元素不存在那么会默认指向 web 窗口，黏性定位偏移是绝对于父级元素计算的，成果只有在父级元素内滚动时才会体现，而且黏性定位的父级元素不肯定是直属父级，间隔黏性定位最近的那个滚动元素就是黏性定位的指标 ，只有黏性定位元素的父级（div1:overflow: scroll;->div2->div3->div4:sticky) 产生滚动，那么以后黏性定位会指向产生滚动的最近一级的父级元素（div4 -> div1）。

顶层黏性定位：黏性定位的默认定位为父级，如果父级元素不存在那么会默认指向 web 窗口

如果黏性定位的元素高度 >= 父元素高度，那么黏性定位的成果会生效。

下面案例中，蓝色矩形是橙色矩形的父级，蓝色的矩形就形成了黏性定位矩形，橙色黏性定位的指向为开启了滚动了红色边框盒子，红色盒子外部滚动的时候，橙色矩形滚动到间隔红色盒子顶部 20px 的时候吸附，持续滚动，蓝色矩形的高度会缓缓变小，当橙色矩形的高度 >= 蓝色矩形高度时，黏性定位会生效，持续滚动时，橙色矩形会随着滚动而隐没。

<div class="placeholder" >
     <div class="locations">
         <div class="chunk"></div>
         <div class="title"> 黏性 </div>
         <div class="content"></div>
     </div>
     <div class="bottomBox"></div>
</div>

.placeholder{
    height:300px;
    width: 240px;
    margin:50px 0px 0px 50px;
    border:1px solid red;
    overflow: scroll;
    .locations{
    margin-top: 40px;
    height: 300px;
    background-color: #fff;
    border: 1px solid blue;
        .chunk{
            height: 50px;
            background-color: rgba(99, 241, 187, 0.5);
            text-align: center;
            line-height: 50px;
        }
        .title{
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: rgba(255, 199, 0,0.5);
            position: sticky;
            top: 20px;
        }
        .content{
            height: 200px;
            background-color: rgba(128, 195, 66,0.5);
        }
    }  
    .bottomBox{height: 500px;}
}

留神：黏性定位的父级元素就是黏性定位矩形

开启了黏性定位的多个元素在容器内顺次排列，上层的黏性定位元素失效时会造成顶走下层的黏性定位的视觉效果。

<ul class="ulChunk">
    <li v-for="(item,index) in 6"> 
        <div class="majorClass"> 主分类{{index}}</div>
        <div class="minorClass" v-for="(item2,index2) in 6"> 元素{{index2}}</div>
    </li>
</ul>

.ulChunk{
    width: 200px;
    height: 300px;
    margin: 50px 0px 0px 50px;
    border: 1px solid red;
    background-color: #eee;
    list-style: none;
    overflow: scroll;
    ::-webkit-scrollbar{display:none}
    
    >li{
      border: 1px solid cyan;
      background-color: #fff;
      margin-bottom: 10px;
      
      >.majorClass{
        position: sticky;  /* 开启黏性定位 */
        top: 0;          
        border: 1px solid gold;
        color: #fff;
        background-color: #4d90fe;
      }
      
      >.minorClass{
        margin: 2px;
        border: 1px solid violet;
      }
      
    }
}

上层黏性定位顶走下层黏性定位的视觉效果其实是下面的黏性束缚矩形的作用，当一个容器内有多个子分类，且子分类顺次排列的时候就应用黏性定位来实现分类顺次展现并且以后分类高亮的成果，然而，应用黏性定位的时候要留神，如果有多个不同模块的黏性定位都放在一个大黏性束缚矩形中，那么滚动的元素会造成重叠的视觉效果，显然这种视觉效果是不佳的，须要应用不同的黏性束缚矩形来将黏性定位元素离开包裹来造成上层元素顶走下层元素的成果。

浏览器的兼容
Safari 浏览器中应用黏性定位须要增加 -webkit- 公有前缀。
IE浏览器应用 Polyfill 能够兼容到 IE9+ 版本。

案例源码：https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~

正文完