vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄功能
效果展示
思路
監(jiān)聽滾動事件,記錄上次的滾動距離,與最新滾動距離做對比,如果為正,說明滾動距離距頂值scrollTop變大,用戶正在向下滾動頁面,此時隱藏,反之則反,隱藏就是top值給他負導(dǎo)航欄的高度距離就隱藏了
步驟
css樣式
.isHide{ top:-76px }
js監(jiān)聽
mounted() { window.addEventListener('scroll', this.scrolling) }, methods: { scrolling(){ // console.log(document.documentElement.scrollTop||document.body.scrollTop) // 可視窗口頂部距離文檔頂部的距離 let scrollTop=document.documentElement.scrollTop||document.body.scrollTop // 與上次滾動所更新的距頂值做對比,如果是小于0,說明這次對比上次的距頂小,說明用戶正在往上滾動,反之則反 let compareLast=scrollTop-this.lastToTop this.lastToTop=scrollTop if (compareLast>0){ this.isHide=true } else { this.isHide=false } } }
nav導(dǎo)航css
position: fixed; top: 0; transition:all 0.3s ;
到此這篇關(guān)于vue實現(xiàn)滾動條下滑時隱藏導(dǎo)航欄,上滑時顯示導(dǎo)航欄的文章就介紹到這了,更多相關(guān)vue滾動條下滑時隱藏導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06Vue使用pages構(gòu)建多頁應(yīng)用的實現(xiàn)步驟
在大部分實際場景中,我們都可以構(gòu)建單頁應(yīng)用來進行項目的開發(fā)和迭代,然而對于項目復(fù)雜度過高或者頁面模塊之間差異化較大的項目,我們可以選擇構(gòu)建多頁應(yīng)用來實現(xiàn),那么什么是多頁應(yīng)用,本文就給大家介紹了Vue使用pages構(gòu)建多頁應(yīng)用的實現(xiàn)步驟2024-12-12vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能) ,需要的朋友可以參考下2018-04-04Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實現(xiàn)表單的基礎(chǔ)搜索重置等功能,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12vue項目報錯Uncaught runtime errors的解決方案
使用vue-cli的vue項目,出現(xiàn)編譯錯誤或警告時,在瀏覽器中顯示全屏覆蓋,提示報錯Uncaught runtime errors,本文給大家介紹了vue項目報錯Uncaught runtime errors的解決方案,需要的朋友可以參考下2024-01-01