In react, scroll to the specified position to display the navigation bar, otherwise immerse in the background

Requirement description

When the navigation bar is at the top, the navigation bar is immersed in the background map; when the mouse slides the scroll wheel to a certain position, the navigation bar is displayed

 

Implementation with native JS

Add scroll event to window and execute corresponding method, here the execution method is handleScroll

  

 

Implementation in react

If you want to use the above code in react, you need to use the lifecycle function componentDidMount Add scroll event

  

Note: the componentDidMount periodic function is executed after the page is loaded and the DOM is generated

 

Define handleScroll()
//definition handleScroll Event function
    handleScroll = (e) => {
        //definition handleScroll Event function
        let header = document.getElementById('header');
        let footerfreeclass = document.getElementById('FooterFreeClass');
        if (window.pageYOffset >= 600) { //if Sentence judgment window page Y Whether the displacement in direction is greater than or 400 px
            //When Y Direction displacement greater than 400 px Add a new style to the defined variable'nav-header-change'
            header.classList.add('nav-header-change');
            footerfreeclass.classList.add('footer-freeclass-block');
        }
        if (window.pageYOffset >= 6000 || window.pageYOffset === 0) {
            //Otherwise remove the style
            header.classList.remove('nav-header-change');
            footerfreeclass.classList.remove('footer-freeclass-block');
        }
    }

 

The above code is generally no problem, but it is found that it will fail in some sizes of mac by chance. After testing,

If the resolution is 1792 wide and 1120 high and below, it will fail, that is, the content to be displayed cannot be displayed after scrolling

So it is safer to use the following improved method

handleScroll(e) {
        //definition handleScroll Event function
        let header = document.getElementById('header');
        let footerfreeclass = document.getElementById('FooterFreeClass');
       
        let wholeScrollHeight = document.documentElement.scrollHeight, // Total height to roll
            visiableHeight = document.documentElement.clientHeight, // Height of visible area
            currentOffset = document.documentElement.scrollTop; // Rolling distance
        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');
            }
        }

    }

 

Precautions

1. In order to achieve compatibility on PC, the two ways to obtain rolling distance should be written, document.documentElement.scrollTop  ||  document.body.scrollTop ;

2. It is necessary for the mobile terminal to obtain the rolling distance document.body.scrollTop , document.documentElement.scrollTop It doesn't work

   Reference to the original

Tags: React Mac Mobile

Posted on Sat, 30 May 2020 10:24:15 -0400 by Ruzzas