因?yàn)轫?xiàng)目需求，最近開始轉(zhuǎn)到微信公眾號(hào)開發(fā)梳庆，接觸到了Vue框架暖途，這個(gè)效果的實(shí)現(xiàn)雖說是基于Vue框架下實(shí)現(xiàn)的，但是同樣也可以借鑒到其他地方膏执，原理都是一樣的驻售。

進(jìn)入正題，先看下效果圖：

吸頂效果

1.監(jiān)聽頁面的滾動(dòng)狀態(tài)：

在mounted回調(diào)中加入以下代碼：

mounted() {
  // handleScroll為頁面滾動(dòng)的監(jiān)聽回調(diào)
  window.addEventListener('scroll', this.handleScroll);
 },

同時(shí)在destroyed回調(diào)中移除監(jiān)聽：

destroyed(){
  window.removeEventListener('scroll', this.handleScroll);
},

2.計(jì)算吸頂元素到頁面頂部的距離：

計(jì)算出來這個(gè)距離之后就可以確定固定吸頂元素的時(shí)機(jī)了蚜枢，如果你的吸頂元素上面的元素的高度是固定的話，那就簡單了针饥，直接在handleScroll方法中進(jìn)行判斷就可以了厂抽，可以直接跳到第三步了，如果是動(dòng)態(tài)的丁眼，那就需要我們?cè)诮涌谡?qǐng)求完數(shù)據(jù)筷凤，dom元素渲染完之后進(jìn)行動(dòng)態(tài)計(jì)算了，Vue中有一個(gè)很好用的方法苞七，可以很方便的監(jiān)聽dom渲染完成：

// 監(jiān)聽dom渲染完成
this.$nextTick(function(){
  // 這里fixedHeaderRoot是吸頂元素的ID
  let header = document.getElementById("fixedHeaderRoot");
  // 這里要得到top的距離和元素自身的高度
  this.offsetTop = header.offsetTop;
  this.offsetHeight = header.offsetHeight;
  console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
});

3.判斷頁面滾動(dòng)距離：

handleScroll(){
  // 得到頁面滾動(dòng)的距離
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // 判斷頁面滾動(dòng)的距離是否大于吸頂元素的位置
  this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight * 2);
},

ps:這里理論上其實(shí)應(yīng)該是scrollTop > (this.offsetTop - this.offsetHeight)藐守，但是不知道為啥我這里做出來后滾動(dòng)到吸頂元素位置的時(shí)候scrollTop還是比this.offsetTop - this.offsetHeight的值小，所以這里*2莽鸭，這樣得出來的值才剛剛好吗伤，如果有知道的朋友可以幫忙解惑一下。

上面我們得到了一個(gè)headerFixed的boolean屬性值硫眨，接下來我們只需要根據(jù)它的值來設(shè)置吸頂元素的position: fixed;屬性就可以了足淆。
我們可以寫一個(gè)css樣式：

.isFixed{
  position: fixed;
  top: px2rem(110);
  left: px2rem(20);
  right: px2rem(20);
}

然后Vue可以在dom元素里這樣動(dòng)態(tài)設(shè)置class，非常方便：

<div id="fixedHeaderRoot">
  <div id="knowPointHeader" class="knowPointHeader" :class="headerFixed?'isFixed':''">
    <div><span>知識(shí)模塊</span></div>
    <div><span>知識(shí)點(diǎn)</span></div>
    <div><span>能力要求</span></div>
  </div>
</div>

其實(shí)到這里這個(gè)效果已經(jīng)實(shí)現(xiàn)完成了礁阁，不過我在測(cè)試過程中發(fā)現(xiàn)巧号，因?yàn)閕os手機(jī)頁面滾動(dòng)到底部的時(shí)候，還可以上拉姥闭，有一個(gè)橡皮筋效果丹鸿，這個(gè)效果會(huì)導(dǎo)致一個(gè)我們頁面的一個(gè)Bug，因?yàn)樗倪@種橡皮筋效果也會(huì)觸發(fā)頁面滾動(dòng)的監(jiān)聽棚品，當(dāng)數(shù)據(jù)很多的時(shí)候其實(shí)看不出來靠欢，只有當(dāng)數(shù)據(jù)剛好占滿屏幕的時(shí)候廊敌，這個(gè)時(shí)候你再繼續(xù)往上滑動(dòng)屏幕，就會(huì)觸發(fā)頁面的滾動(dòng)監(jiān)聽门怪，這個(gè)時(shí)候handleScroll方法中計(jì)算出來的值scrollTop是大于吸頂元素top的距離骡澈，所以吸頂元素會(huì)被設(shè)置為固定屬性，大家知道一個(gè)元素一旦被設(shè)置為position: fixed;掷空，那么它就會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位肋殴，這樣我們下面的內(nèi)容就會(huì)往上頂，這樣的話scrollTop的值又小于了吸頂元素top的距離坦弟，這樣headerFixed屬性又為false护锤，position: fixed;屬性又沒有了，這樣它就又相對(duì)與它原本的父元素進(jìn)行定位酿傍，這樣就成了一個(gè)循環(huán)烙懦，你會(huì)發(fā)現(xiàn)頁面會(huì)上下跳到，這樣是肯定不行的拧粪，所以我下面又針對(duì)這個(gè)問題進(jìn)行了一個(gè)優(yōu)化修陡，當(dāng)然這個(gè)方案感覺不是特別完美，不過確實(shí)可以解決這個(gè)問題可霎。

通過上面的分析我們可以得知造成這個(gè)問題的原因是因?yàn)槲覀儼言O(shè)置了元素的position: fixed;屬性，使得下面的內(nèi)容往上頂宴杀，所以要想解決這個(gè)問題癣朗，那我們就不固定這個(gè)元素，但是這樣的話就達(dá)不到吸頂?shù)男Ч送眨晕覀冃枰偌右粋€(gè)和吸頂元素一模一樣的元素旷余，它一直就是固定狀態(tài)：

<div id="fixedHeaderRootReal">
  <div class="knowPointHeader isFixed" v-show="headerFixed">
    <div><span>知識(shí)模塊</span></div>
    <div><span>知識(shí)點(diǎn)</span></div>
    <div><span>能力要求</span></div>
  </div>
</div>

這個(gè)元素默認(rèn)是隱藏的，只有當(dāng)頁面滾動(dòng)的距離達(dá)到了它的位置的時(shí)候我們才讓它顯示扁达，由于它是固定狀態(tài)正卧，所以它的隱藏顯示并不會(huì)對(duì)頁面產(chǎn)生影響，這樣下面的內(nèi)容就不會(huì)往上頂了跪解，就可以解決ios手機(jī)上拉頁面橡皮筋效果的Bug了炉旷，當(dāng)然這種方式有些取巧，但是暫時(shí)沒有更好的解決方案了叉讥，如果大家有更好的解決方案窘行，歡迎在下面評(píng)論。最后給大家看一下我的頁面布局：

<div v-show="kpointListShow" class="knowPointList">
      <div id="fixedHeaderRoot">
        <div id="knowPointHeader" class="knowPointHeader">
          <div><span>知識(shí)模塊</span></div>
          <div><span>知識(shí)點(diǎn)</span></div>
          <div><span>能力要求</span></div>
        </div>
      </div>
      <div id="fixedHeaderRootReal">
        <div class="knowPointHeader isFixed" v-show="headerFixed">
          <div><span>知識(shí)模塊</span></div>
          <div><span>知識(shí)點(diǎn)</span></div>
          <div><span>能力要求</span></div>
        </div>
      </div>
      <div class="knowPointItem" v-for="(kpointItem,index) in rows.kpointList" :key="index">
        <div><span>{{kpointItem.knowModule}}</span></div>
        <div><span>{{kpointItem.knowPoint}}</span></div>
        <div><span>{{kpointItem.abilityRequire}}</span></div>
      </div>
</div>

參考

喜歡的麻煩動(dòng)動(dòng)小手點(diǎn)個(gè)贊來支持我图仓，有不對(duì)的地方歡迎大家指正罐盔，有什么問題也可以在下方留言，我看到后會(huì)第一時(shí)間回復(fù)救崔！謝謝您來看這篇文章惶看！??????