VUE 實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng) 導(dǎo)航欄置頂?shù)姆椒?/h1>

發(fā)布時(shí)間：2020-09-22 07:02:01 來(lái)源：腳本之家 閱讀：377 作者：Oceanic_Kang 欄目：web開(kāi)發(fā)

HTML

非重點(diǎn)的代碼，比如樣式啥的，我就不放上來(lái)了，一筆帶過(guò)

簡(jiǎn)略的寫(xiě)一下html代碼，可以對(duì)照文章最后的效果圖看，應(yīng)該不難理解

<div :>

 <header>資源信息</header>

 <div>
  <!-- 公司信息 瀏覽量 -->
 </div>

 <div id="fixedBar" :class="{ fixedBar: isFixed }">
  <!-- 品名 -->
  <!-- 規(guī)格 -->
  <!-- 產(chǎn)地 -->
  <!-- 單價(jià) -->
 </div>

 <div :>
  <!-- 數(shù)據(jù)列表 -->
 </div>

 <footer class="footer">
  <button>訂閱</button>
  <button>關(guān)閉</button>
  <div v-show="advertShow">
   <a @click="del">×</a>
   <img src="./廣告.jpg" />
  </div>
 </footer>

</div>

<style>
 .fixedBar {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
 }
</style>

VUE

1. data ()

data () {
 paddingBottom: '1.5rem', // 給最外層div一個(gè)padding-bottom
 // 因?yàn)閒ooter是fixed定位 如果padding-bottom為0 數(shù)據(jù)列表拉到最下面的時(shí)候 會(huì)有部分?jǐn)?shù)據(jù)被footer擋住

 isFixed: false, // bar浮動(dòng)
 offsetTop: 0, // 觸發(fā)bar浮動(dòng)的閾值
 marginTop: 0, // 觸發(fā)bar浮動(dòng)的同時(shí) 給數(shù)據(jù)列表一個(gè)margin-top 防止列表突然上移 會(huì)很突兀

 advertShow: true, // 廣告顯示
}

2. mounted ()

mounted () {
 // 設(shè)置初始的 padding-bottom 值為 footer 的高度 +20 防止數(shù)據(jù)列表拉到最下面被footer擋住 +多少自定
 this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';

 // 設(shè)置bar浮動(dòng)閾值為 #fixedBar 至頁(yè)面頂部的距離
 this.offsetTop = document.querySelector('#fixedBar').offsetTop;

 // 開(kāi)啟滾動(dòng)監(jiān)聽(tīng)
 window.addEventListener('scroll', this.handleScroll);
}

3. methods

methods: {
 // 關(guān)閉廣告
 del () {
  this.advertShow = true;
  this.$nextTick(() => {
   this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
  });
 },

 // 滾動(dòng)監(jiān)聽(tīng) 滾動(dòng)觸發(fā)的效果寫(xiě)在這里
 handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop >= this.offsetTop) {
   this.isFixed = true;
   this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
  } else {
   this.isFixed = false;
   this.marginTop = 0;
  }
 }
}

4. destroyed ()

destroyed () {
 window.removeEventListener('scroll', this.handleScroll); // 離開(kāi)頁(yè)面 關(guān)閉監(jiān)聽(tīng) 不然會(huì)報(bào)錯(cuò)
}

效果圖

向AI問(wèn)一下細(xì)節(jié)