Hello, I have a one section website that shows sections (about, services, …) when scrolling down (hiding the previous section).
How can I use JavaScript code to add CSS changes when each section is shown (changes like: show/hide a certain logo, change color of active text of the section in main menu, changing color of navigation menu, …?
What I mean : if this section is selected (using the menu or the nav bar) / scrolled to (mouse scrolling) , then do the CSS changes
Any help?
Take a look at the JavaScript API for what is called “Intersection Observation”. This API allows you to detect when elements come into view of the window (like scrolling) and gives you a chance to then add CSS to the elements (which JavaScript has always allowed you to do).
The idea here is that when something comes into view, you can then react to the event that it has come into view and apply a class to an element or apply individual styles. For instance, when the section containing the logo comes into view, you can react to the event, select the logo using something like document.getElementById('logo-id-here'); and then apply styles to the element.
Besides the link above, you can also check out this page where it talks about it (and the old way of using the scroll event… which you should not use)
I hope this helps! 
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.