滑動頭部固定，要不也瞭解下？

前言

最近公司事情比較少，正好早上有人問我那個滑動粘着頭部不動的怎麼實現，我想了半天，前幾天剛剛寫過，那就記錄一下咯。因而，女友送了我一張圖

拋思路

其實思路還蠻簡單的，監聽容器div的滾動時間，及每一個須要fixed的高度，滑到這個對應高度了，fixed住就好了。可能有點籠統，咱們結合代碼說吧。
今天咱們從基本的template-script-style模式來貼代碼好了

template

<!--滑動的容器-->
<div class="scroll-div">
    <!--一個頭部加一個item的容器-->
    <div class="for-class" v-for="item in baseArray">
        <!--須要fixed住的頭部,id爲獲取具體位置使用,可替換成ref
        綁定class實現添加fixed樣式做用-->
        <div class="info-line"
             :id="item.idName"
             :class="{fiexd_line:fiexdItem===item.fiexdItem}">
             {{item.name}}
        </div>
     <!--下方的item，這裏與本文關係不到,可忽略-->
     <div class="detail-container" 
          :class="{margin_top:fiexdItem===1000}">
          <div class="detail-item"
               v-for="sub_item in item.list"
               @click="setLocation(sub_item)">
               {{sub_item}}
          </div>
    </div>
</div>
複製代碼

style

而後是css部分，這裏用了scss的寫法，具體是什麼，自行百度或谷歌，其中只列出了有關的樣式，剩餘部分用…省略

.scroll-div {
      width: 100%;
      overflow: auto;
      ...
    }
    .info-line {
     ...
     //這個都不是特別重要
    }
    .fiexd_line {
      position: fixed;
      width: 100%;
      ...
    }
複製代碼

script

重頭戲來了，咱們一步一步順清楚。
1.數據初始化
2.事件監聽
3.邏輯判斷

數據初始化

具體的數據可根據實際狀況修改，這裏的數據以效果圖爲準
//添加A-Z數組
let baseAtoZArray = [];//生成A-Z的字母
for (let i = 65; i < 91; i++) {
    baseAtoZArray.push(String.fromCharCode(i));
}
//均分數組並添加相應的數據，每一個子數組最多有7個元素
this.baseArray = [...chunk(baseAtoZArray, 7)];
for (let item of this.baseArray) {
    this.baseArray[this.baseArray.indexOf(item)] = {
        name: item.join(''),//顯示的文本
        idName: `${item[0]}2${item[item.length - 1]}-line`,//惟一id,es6模版字符串和下方的...運算符瞭解下
        fiexdItem: this.baseArray.indexOf(item),//fixed標識
        list: this.getRegList(item[0], item[item.length - 1]),//符合該條件的下方內容，與本文關係不大
    };
}
//添加指望工做城市與熱門城市
this.baseArray = [
{
    name: '指望工做城市',
    idName: `base-line`,
    fiexdItem: 1000,
    list: [this.location],
},
{
    name: '熱門城市',
    idName: `hot-line`,
    fiexdItem: 100,
    list: this.$config.HOT_CITIES,
},...this.baseArray];
複製代碼

事件監聽+邏輯判斷

//監聽滾動事件
//界面加載完成後，將每一層header距離頭部的距離記錄下來
for (let item of that.baseArray) {
    item.top = $('#' + item.idName).offset().top
}
$('.scroll-div').on('scroll', function () {
    //對每一項數據監測
    for (let item of that.baseArray) {
        if (this.scrollTop  > item.top - 20) {
            //由於在同一高度中，只可能有一個header，因此設置一個，其餘header不匹配，而後duang的一下符合條件的就fixed住了
            that.fiexdItem = item.fiexdItem;
        }
    }
});
複製代碼

代碼就這麼多，主要是數據準備上以及獲取上要下點功夫，還有不少須要優化的地方，騷年們加油吧，在這裏我就給大家喊:

效果圖

後話

最近產出有點多，但願能對你們有所幫助

好了，要被老闆拖過去搬磚了，下次見，有空點點github嘛。

這是個人github，歡迎大佬們猛戳，不定時更新