滑動頭部固定，要不也瞭解下？
阿新 • • 發佈：2018-12-10
前言
最近公司事情比較少，正好早上有人問我那個滑動粘著頭部不動的怎麼實現，我想了半天，前幾天剛剛寫過，那就記錄一下咯。於是，女朋友送了我一張圖。
拋思路
其實思路還蠻簡單的，監聽容器div的滾動時間，及每個需要fixed的高度，滑到這個對應高度了，fixed住就行了。可能有點籠統，我們結合程式碼說吧。
今天我們從基本的template-script-style模式來貼程式碼好了。
template
| 12345678910111213141516171819202122 | <!--滑動的容器--><div class="scroll-div"> <!--一個頭部加一個item的容器--> <div class="for-class" v-for="item in baseArray"> <!--需要fixed住的頭部,id為獲取具體位置使用,可替換成ref 繫結class實現新增fixed樣式作用--> < |
style
然後是css部分，這裡用了scss的寫法，具體是什麼，自行百度或谷歌，其中只列出了有關的樣式，剩餘部分用…省略
CSS| 12345678910111213 | .scroll-div {width: 100%; overflow: auto; ...}.info-line { ... //這個都不是特別重要}.fiexd_line {position: fixed; width: 100%; ...} |
script
重頭戲來了，我們一步一步順清楚。 1.資料初始化 2.事件監聽 3.邏輯判斷
資料初始化
JavaScript| 123456789101112131415161718192021 | //具體的資料可根據實際情況修改，這裡的資料以效果圖為準// 新增A-Z陣列let baseAtoZArray=[];//生成A-Z的字母for(leti=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]; |
事件監聽+邏輯判斷
JavaScript| 1234567891011121314 | //監聽滾動事件// 介面載入完成後，將每一層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嘛。
