Need some help with scroll-in-view interaction

Hi everyone, i need your help… :handshake:

I have two “scroll-in-view” interactions on my landingpage.

First: The first one is at the top of the page. A div with the class-name of hero-section-scroll-track, triggers the interaction and changes the body-color to red.
When the trigger is scrolling out of view, it changes the body-color to beige.

Second: At the end of the page I have another section, which also changes the body-color to red. When scrolling out-of-view it changes the body-color back to beige.

The problem: If the page is scrolled too quickly from the bottom to the top, then the body-color suddenly changes to beige and I don’t understand why. Actually the body color should be red again at the top of the page.

I´m glad for help!
Here is my public share link: LINK
(how to access public share link)

The Video shows the problem…
https://www.loom.com/share/d05a65f12ce7455b95f03e92593d4e29