How to change your navigation style on scroll
Why Stack Overflow recommends it
Stack Overflow users link it as a worked example when asking about or answering how to restyle a header on scroll with IntersectionObserver instead of scroll event listeners.
Recommended by 0 people across 0 different months, 2019 to 2020.
What it is
Kevin Powell walks through building a fixed navigation bar that changes style as you scroll. He uses the Intersection Observer API to detect when an element leaves the viewport and toggles a class on the nav, with CSS custom properties keeping the style change simple. A GitHub repo with start and finished versions accompanies the video.
What people said
Cites KP83 · 2019-09 · Stack Overflow · on “Change style header/nav with Intersection Observer (IO)”
After the user: *cloned* told me about IO got more information about it and it is a more modern approach than the old listener on scroll function which as his downfalls, but even if it was it didn't work exactly as i wanted. Fixed header does not have any issues of intersecting al the time, that isn't true or the case. There lots of examples of changing a fixed header on scroll using intersection observer: [this video]
Cites Ankush Chauhan · 2020-03 · Stack Overflow · on “Change style of header on scroll using IntersectionObserver in react”
The following code using IntersectionObserver in simple Html & JavaScript works fine to change the header styling depending on the visibility of a section just below the header. Reference [this video] observer.js const header = document.querySelector("header"); const sectionOne = document.querySelector(".home-intro"); const sectionOneOptions = { rootMargin: "-200px 0px 0px 0px" }; const sectionOneObserver = new IntersectionObserver(function( entries, sectionOneObserver ) { entries.forEach(entry => { if (!entry.isIntersecting) { header.classList.add("nav-scrolled"); } else { header.classList.remove("nav-scrolled"); } }); }, sectionOneOptions); sectionOneObserver.observe(sectionOne); The above obse
Cites Ankush Chauhan · 2020-03 · Stack Overflow · on “Change style of header component on scroll on home page only in React.Js”
Yes, Intersection Observer might be a better option. Just saw this [this video] video, but can you throw some light on how this can be achieved in React as the DOM nodes concerned (Header and node to be observed) are in different components.
Cites bastien · 2020-11 · Stack Overflow · on “Changing nav-bar color after scrolling?”
How about the Intersection Observer API [LINK] ? This avoids the potential sluggishness from using the scroll event. HTML <nav class="navbar-fixed-top">Navbar</nav> <main> <div class="content">Some content</div> </main> CSS .navbar-fixed-top--scrolled changes the nav bar background color. It's added to the nav bar when the content div is no longer 100% visible as we scroll down. .navbar-fixed-top { position: sticky; top: 0; height: 60px; } .navbar-fixed-top--scrolled { /* change background-color to whatever you want */ background-color: grey; } JS Create the observer to determine when the content div fully intersects with the browser viewport. The callback function is called: the first time