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