I’ve been working on an adaptive navbar, which changes color based on the section of the page that it scrolls though.
I saw a video which pointed at utilizing the “While scrolling in view” animation, linked to a section, which changes the navbar color when it enters into view fully (0%) and reverts when it leaves out of view completely (100%)
It behaves exactly how I want - BUT, when I’m scrolling from top to bottom.
When I scroll out of the section, from bottom to top, the Navbar does not revert it’s color.
I’m assuming this is because it changes color only at 100%, and it registers 100% at the bottom of the page, and not the top of the page.
How do I fix this? I’ve attached a video of the behavior I’m talking about.
Here’s the video - Imgur: The magic of the Internet
Here is my public share link: Link