VUE 實現(xiàn)滾動監(jiān)聽 導(dǎo)航欄置頂?shù)姆椒?/h1>
更新時間：2018年09月11日 15:45:03 作者：Oceanic_Kang
今天小編就為大家分享一篇VUE 實現(xiàn)滾動監(jiān)聽 導(dǎo)航欄置頂?shù)姆椒?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
HTML
非重點的代碼，比如樣式啥的，我就不放上來了，一筆帶過
簡略的寫一下html代碼，可以對照文章最后的效果圖看，應(yīng)該不難理解
<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>關(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一個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 () {
// 設(shè)置初始的 padding-bottom 值為 footer 的高度 +20 防止數(shù)據(jù)列表拉到最下面被footer擋住 +多少自定
this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
// 設(shè)置bar浮動閾值為 #fixedBar 至頁面頂部的距離
this.offsetTop = document.querySelector('#fixedBar').offsetTop;
// 開啟滾動監(jiān)聽
window.addEventListener('scroll', this.handleScroll);
}
3. methods
methods: {
// 關(guān)閉廣告
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); // 離開頁面 關(guān)閉監(jiān)聽 不然會報錯
}
效果圖
以上這篇VUE 實現(xiàn)滾動監(jiān)聽 導(dǎo)航欄置頂?shù)姆椒ň褪切【幏窒斫o大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
-
前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)
在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下 2024-09-09
-
本篇文章給大家分享了Vue實例的相關(guān)內(nèi)容以及重要知識點，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。 2018-04-04
-
本文主要介紹了vue項目proxyTable配置小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2023-04-04
-
跨域指瀏覽器不允許當(dāng)前頁面的所在的源去請求另一個源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下 2022-07-07
-
Template?ref在Vue3中的實現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪 2022-07-07
-
這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2018-09-09
-
這篇文章主要介紹了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)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2020-04-04
-
vue如何解決watch和methods值執(zhí)行順序問題
這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教 2024-08-08
最新評論
HTML
非重點的代碼，比如樣式啥的，我就不放上來了，一筆帶過
簡略的寫一下html代碼，可以對照文章最后的效果圖看，應(yīng)該不難理解
<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>關(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一個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 () {
// 設(shè)置初始的 padding-bottom 值為 footer 的高度 +20 防止數(shù)據(jù)列表拉到最下面被footer擋住 +多少自定
this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
// 設(shè)置bar浮動閾值為 #fixedBar 至頁面頂部的距離
this.offsetTop = document.querySelector('#fixedBar').offsetTop;
// 開啟滾動監(jiān)聽
window.addEventListener('scroll', this.handleScroll);
}
3. methods
methods: {
// 關(guān)閉廣告
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); // 離開頁面 關(guān)閉監(jiān)聽 不然會報錯
}
效果圖
以上這篇VUE 實現(xiàn)滾動監(jiān)聽 導(dǎo)航欄置頂?shù)姆椒ň褪切【幏窒斫o大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
-
前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)
在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下2024-09-09 - 本篇文章給大家分享了Vue實例的相關(guān)內(nèi)容以及重要知識點，對此有興趣的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
- 本文主要介紹了vue項目proxyTable配置小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
- 跨域指瀏覽器不允許當(dāng)前頁面的所在的源去請求另一個源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
-
Template?ref在Vue3中的實現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07 - 這篇文章主要介紹了vue解決彈出蒙層滑動穿透問題的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
- 這篇文章主要介紹了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)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04 -
vue如何解決watch和methods值執(zhí)行順序問題
這篇文章主要介紹了vue如何解決watch和methods值執(zhí)行順序問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08