vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
接下來是中部導(dǎo)航欄。我們看到這里的頭像動(dòng)畫，和中部導(dǎo)航欄定位都是跟鼠標(biāo)滾動(dòng)有關(guān)的。我們先將布局實(shí)現(xiàn)一下。這里是要求在頁(yè)面上部分滾動(dòng)范圍內(nèi)，導(dǎo)航欄一直在div的上部，隨著鼠標(biāo)的滾動(dòng)而改變位置。到下部分滾動(dòng)范圍，導(dǎo)航欄就一直固定到頁(yè)面的上部分。
這里需要注意兩個(gè)地方
這里需要一個(gè)覆蓋不了的區(qū)域，可以給人一種更好開關(guān)屏的感覺。而且中部導(dǎo)航欄下方區(qū)域的內(nèi)容，在下滑的時(shí)候不能出現(xiàn)在這個(gè)區(qū)域。
一定要注意 盡可能的少進(jìn)行DOM操作，這樣是非常影響性能的 ！
監(jiān)聽鼠標(biāo)滾動(dòng)事件
private fixedFlag: boolean = false;
private unFixedFlag: boolean = true;
private mounted() {
window.addEventListener("scroll", this.handleScroll);
}
private handleScroll() {
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (scrollTop > 300) {
if (!this.fixedFlag) {
const obj = document!.getElementById("index-menu");
const obj2 = document!.getElementById("fake-area");
obj!.style.position = "fixed";
obj!.style.top = "77px";
obj2!.style.position = "fixed";
obj2!.style.top = "47px";
this.fixedFlag = true;
this.unFixedFlag = false;
}
} else {
if (!this.unFixedFlag) {
const obj = document!.getElementById("index-menu");
const obj2 = document!.getElementById("fake-area");
obj!.style.position = "";
obj!.style.top = "";
obj2!.style.position = "";
obj2!.style.top = "";
this.unFixedFlag = true;
this.fixedFlag = false;
}
}
}
效果展示
項(xiàng)目地址
https://github.com/pppercyWan...
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂播放器的示例
這篇文章主要介紹了vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂播放器的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了vue基于Vue2.0和高德地圖的地圖組件實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Vue 集成 storybook的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
解決安裝vue3腳手架@vue/cli報(bào)4048錯(cuò)誤問題
這篇文章主要介紹了解決安裝vue3腳手架@vue/cli報(bào)4048錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語言兼容
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語言兼容,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
源碼分析Vue.js的監(jiān)聽實(shí)現(xiàn)教程
這篇文章主要通過源碼分析介紹了Vue.js的監(jiān)聽實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
Vue實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能
這篇文章主要為大家詳細(xì)介紹了如何Vue利用實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12
關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個(gè)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue基礎(chǔ)知識(shí)快速入門教程,我們可以先學(xué)會(huì)用，使用一段時(shí)間之后，回頭來熟悉一下Vue框架以及它的特點(diǎn),需要的朋友可以參考下2023-05-05
本文通過實(shí)例代碼給大家介紹了Vue表單demo v-model雙向綁定問題,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06