需求描述

  当导航栏置顶时,导航栏沉浸在背景图里;当鼠标滑动滚轮到一定位置时,显示导航栏

 

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

   参考原文