While Page is Scrolling Animation is breaking with different screen sizes

Design help Animations & Interactions
1

I’ve created an animation for all my websites pages to change the navbar background and button colors while scrolling to make it more visible. For example, when the navbar is on top of a white section, the buttons are black and the background is white. When the navbar is on top of a black section, the buttons are grey and the background is black. It looks great when I am editing on my monitor, but if I look at the page on my laptop, the animation gets messed up because the percentages of the screen are different. I’ve tried changing the animation to While Scrolling In View, but I experience the same problem. Does anyone have any ideas about how I can fix this?

The home page linked below shows the While Page is Scrolling
This page shows individual While Scrolling in View: http://practice-website-09d944.webflow.io/services/landing-page-design

Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/practice-website-09d944?utm_source=practice-website-09d944&preview=8d1d464767a02f9a1d1c023204ac449f

Here is the published page: http://practice-website-09d944.webflow.io/

2

Hello!

The best solution for this would be to give each section a Scroll Into View animation that targets the navbar. Then, just adjust the offset of each section by a pixel number instead of a percentage. Also, to make your life way easier instead of targeting every single nav link and to change color on every single animation, you can just select one nav link and then select Class: All elements with this class. And it will change the color of each nav link because they all have the class Nav Buttons Desktop:

d3b1c2c433630b1301e6a77b9c1332a4
d3b1c2c433630b1301e6a77b9c1332a4236×756 16.6 KB

Here is a link that can give you a better understanding on how to use the Scroll Into View feature:

If you have any more questions let me know!