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大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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

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

相關文章

• 

  vue3通過canvas實現(xiàn)圖片圈選功能

  這篇文章將給大家詳細介紹了vue3如何通過canvas實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學習一下吧

  2023-12-12
• 

  前端文件導出設置responseType為blob時遇到的問題及解決

  這篇文章主要給大家介紹了關于前端文件導出設置responseType為blob時遇到的問題及解決方法,文中通過圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

  2023-09-09
• 

  vue項目實現(xiàn)局部全屏完整代碼

  最近需要做一個全屏功能,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關于vue項目實現(xiàn)局部全屏的相關資料,需要的朋友可以參考下

  2023-09-09
• 

  vue如何在main.js中配置全局的通用公共組件

  這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

  2023-01-01
• 

  vue3動態(tài)路由刷新后空白或者404問題的解決

  在vue項目中采用動態(tài)添加路由的方式,第一次進入頁面會正常顯示,但是點擊刷新頁面后會導致頁面空白,所以下面這篇文章主要給大家介紹了關于vue3動態(tài)路由刷新后空白或者404問題的解決方法,需要的朋友可以參考下

  2022-07-07
• 

  Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境

  這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

  2022-08-08
• 

  對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解

  今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

  2018-08-08
• 

  vue實現(xiàn)tab路由切換組件的方法實例

  這篇文章主要給大家介紹了關于vue實現(xiàn)tab路由切換組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2021-05-05
• 

  Vue中常用的rules校驗規(guī)則的實現(xiàn)

  在vue開發(fā)中,難免遇到各種表單校驗,本文主要介紹了Vue中常用的rules校驗規(guī)則的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

  2023-10-10
• 

  詳解如何使用vue和electron開發(fā)一個桌面應用

  這篇文章主要為大家介紹了詳解如何使用vue和electron開發(fā)一個桌面應用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

  2023-03-03

最新評論