Behavior of "While Scrolling In View Animation" (Video Attached)


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

Thank you!

Here is my public share link: Link