react中实现滚动到指定位置固定显示导航栏，反之浸入背景

//定义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');
        }
    }

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');
            }
        }

    }