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不起作用

 　 参考原文

　 

 

来源：oschina

链接：https://my.oschina.net/u/4418711/blog/4295767