vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄功能

更新時間：2024年07月29日 10:40:34 作者：Zww0891

這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

效果展示

scrollhide

思路

監(jiān)聽滾動事件，記錄上次的滾動距離，與最新滾動距離做對比，如果為正，說明滾動距離距頂值scrollTop變大，用戶正在向下滾動頁面，此時隱藏，反之則反，隱藏就是top值給他負導航欄的高度距離就隱藏了

步驟

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導航css

  position: fixed;
    top: 0;
    transition:all 0.3s ;

到此這篇關于vue實現(xiàn)滾動條下滑時隱藏導航欄，上滑時顯示導航欄的文章就介紹到這了,更多相關vue滾動條下滑時隱藏導航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解Vue.js v-for不支持IE9的解決方法
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Vue中Mixin&extends的詳細使用教程
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關于Vue中Mixin&extends的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-02-02
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-06-06
Vue使用pages構建多頁應用的實現(xiàn)步驟
在大部分實際場景中,我們都可以構建單頁應用來進行項目的開發(fā)和迭代,然而對于項目復雜度過高或者頁面模塊之間差異化較大的項目,我們可以選擇構建多頁應用來實現(xiàn),那么什么是多頁應用,本文就給大家介紹了Vue使用pages構建多頁應用的實現(xiàn)步驟
2024-12-12
vue儲存storage時含有布爾值的解決方案
這篇文章主要介紹了vue儲存storage時含有布爾值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-06-06
Vue中引入json的三種方式總結
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實例代碼(實現(xiàn)加減功能) ,需要的朋友可以參考下
2018-04-04
Vue3+Element+Ts實現(xiàn)表單的基礎搜索重置等功能
本文主要介紹了Vue3+Element+Ts實現(xiàn)表單的基礎搜索重置等功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue如何通過插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過插槽組件之間數(shù)據(jù)傳遞問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue項目報錯Uncaught runtime errors的解決方案
使用vue-cli的vue項目,出現(xiàn)編譯錯誤或警告時,在瀏覽器中顯示全屏覆蓋,提示報錯Uncaught runtime errors,本文給大家介紹了vue項目報錯Uncaught runtime errors的解決方案,需要的朋友可以參考下
2024-01-01