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

Hello,

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