react中實現滾動到指定位置固定顯示導航欄，反之浸入背景

 

　　需求描述

　　當導航欄置頂時，導航欄沉浸在背景圖里；當鼠標滑動滾輪到一定位置時，顯示導航欄

 

　　用原生JS實現

　　給window添加scroll滾動事件並執行對應方法，這里執行方法為handleScroll

　　

 

　　react中實現

　　在react中如果要使用上面的代碼，需要使用生命周期函數componentDidMount添加scroll滾動事件

　　

 　  注：componentDidMount周期函數是在頁面加載完，DOM都生成后執行

 

　 定義handleScroll()

//定義handleScroll事件函數
    handleScroll = (e) => {
        //定義handleScroll事件函數
        let header = document.getElementById('header');
        let footerfreeclass = document.getElementById('FooterFreeClass');
        if (window.pageYOffset >= 600) { //if語句判斷window頁面Y方向的位移是否大於或者400px
            //當Y方向位移大於400px時，定義的變量增加一個新的樣式'nav-header-change'
            header.classList.add('nav-header-change');
            footerfreeclass.classList.add('footer-freeclass-block');
        }
        if (window.pageYOffset >= 6000 || window.pageYOffset === 0) {
            //否則就移除樣式
            header.classList.remove('nav-header-change');
            footerfreeclass.classList.remove('footer-freeclass-block');
        }
    }

 

 　 上面代碼一般沒什么問題，但偶然發現在mac某些尺寸下會失效，經測試，

　  在分辨率為寬1792 高1120及以下尺寸就會失效，即滾動后無法顯示要展示的內容

　 所以用下面改良后的方法更穩妥

handleScroll(e) {
        //定義handleScroll事件函數
        let header = document.getElementById('header');
        let footerfreeclass = document.getElementById('FooterFreeClass');
       
        let wholeScrollHeight = document.documentElement.scrollHeight, // 能夠滾動的總高度
            visiableHeight = document.documentElement.clientHeight, // 可視區域高度
            currentOffset = document.documentElement.scrollTop; // 滾動的距離
        if (currentOffset > 200) {
            header.classList.add('nav-header-change');
        } else {
            header.classList.remove('nav-header-change');
        }
        if (footerfreeclass !== undefined && footerfreeclass !== null) {
            if (currentOffset > 200 && wholeScrollHeight - currentOffset - visiableHeight > 400) {
                footerfreeclass.classList.add('footer-freeclass-block');
            } else {
                footerfreeclass.classList.remove('footer-freeclass-block');
            }
        }

    }

 

　  注意事項

　  1. PC上為了兼容性，獲取滾動距離的2種方式都要寫，document.documentElement.scrollTop || document.body.scrollTop;

　  2. 移動端獲取滾動的距離要用document.body.scrollTop，document.documentElement.scrollTop不起作用

 　 參考原文