VUE 實現(xiàn)滾動監(jiān)聽 導航欄置頂?shù)姆椒?/h1>

 更新時間：2018年09月11日 15:45:03   作者：Oceanic_Kang  

今天小編就為大家分享一篇VUE 實現(xiàn)滾動監(jiān)聽 導航欄置頂?shù)姆椒?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

HTML

非重點的代碼，比如樣式啥的，我就不放上來了，一筆帶過

簡略的寫一下html代碼，可以對照文章最后的效果圖看，應該不難理解

<div :style="{ paddingBottom: paddingBottom}">

 <header>資源信息</header>

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

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

 <div :style="{ marginTop: marginTop }">
  <!-- 數(shù)據(jù)列表 -->
 </div>

 <footer class="footer">
  <button>訂閱</button>
  <button>關閉</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一個padding-bottom
 // 因為footer是fixed定位 如果padding-bottom為0 數(shù)據(jù)列表拉到最下面的時候 會有部分數(shù)據(jù)被footer擋住

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

 advertShow: true, // 廣告顯示
}

2. mounted ()

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

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

 // 開啟滾動監(jiān)聽
 window.addEventListener('scroll', this.handleScroll);
}

3. methods

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

 // 滾動監(jiān)聽 滾動觸發(fā)的效果寫在這里
 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); // 離開頁面 關閉監(jiān)聽 不然會報錯
}

效果圖

以上這篇VUE 實現(xiàn)滾動監(jiān)聽 導航欄置頂?shù)姆椒ň褪切【幏窒斫o大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

• vue+導航錨點聯(lián)動-滾動監(jiān)聽和點擊平滑滾動跳轉實例
• vue 自定指令生成uuid滾動監(jiān)聽達到tab表格吸頂效果的代碼
• vue監(jiān)聽滾動事件實現(xiàn)滾動監(jiān)聽
• 詳解使用vue-router進行頁面切換時滾動條位置與滾動監(jiān)聽事件
• vue實現(xiàn)錨點跳轉及滾動監(jiān)聽的方法

• VUE
• 滾動
• 監(jiān)聽
• 導航欄

相關文章

• 

  前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)

  在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下

  2024-09-09
• 

  學習Vue組件實例

  本篇文章給大家分享了Vue實例的相關內容以及重要知識點，對此有興趣的朋友可以跟著學習參考下。

  2018-04-04
• 

  vue項目proxyTable配置小結

  本文主要介紹了vue項目proxyTable配置小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2023-04-04
• 

  VUE跨域詳解以及常用解決跨域的方法

  跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數(shù)據(jù),下面這篇文章主要給大家介紹了關于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

  2022-07-07
• 

  Template?ref在Vue3中的實現(xiàn)原理詳解

  這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

  2022-07-07
• 

  vue解決彈出蒙層滑動穿透問題的方法

  這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

  2018-09-09
• 

  elementui中使用el-tree控件懶加載和局部刷新

  這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

  2022-08-08
• 

  vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼

  這篇文章主要介紹了vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)，文中我們使用v-model加watch 實現(xiàn)這一個功能,代碼簡單易懂，需要的朋友可以參考下

  2019-11-11
• 

  詳解vue-flickity的fullScreen功能實現(xiàn)

  這篇文章主要介紹了詳解vue-flickity的fullScreen功能實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2020-04-04
• 

  vue如何解決watch和methods值執(zhí)行順序問題

  這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

  2024-08-08

最新評論