Changing a CSS value of a selector while scrolling into view


I have a couple of sections on the homepage. There are 3 theme colors available.

Two of the sections are a trigger (scroll into view) of the body’s color background, the nav bg, and a floating button bg change (+ there are color font changes, border, etc).

I want to set an 80% offset of scroll into view, and 20% of scroll out of view.

While setting up the “Scroll into view” interaction on two consecutive sections, the “scroll out of view” stage of the section above blocks the “scroll into view” of the next section.

In previous projects, I used to add divs and set several selectors with corresponding backgrounds, and played with opacity. Since I have components of the navbar, and floating buttons, and want to change colors for other elements as well, I’m wondering if it’s possible to set those changes to specific selectors natively.

Setting up “while scrolling in view” on the whole body, and having % keyframes isn’t accurate.

Does anyone have some experience in this topic?