Change element color after 100vh scroll — precisely, without using custom code

Design help Custom code
1

Hi everyone,
I’m working on a Webflow project and I’m trying to achieve a very specific effect:
I’d like an element (in my case, a navbar) to change its color exactly after the user has scrolled past 100vh — meaning after the first section of the page is completely out of view.

I’ve already tried two approaches:

  • While page is scrolling → works with scroll percentages, but it’s not precise or consistent across different breakpoints.

  • While element is in view → triggers as soon as the section starts to enter the viewport, not when it’s fully passed.

What I need is a precise and reliable way to detect when the page has scrolled past 100vh, ideally without custom code, or with the absolute minimum amount if it’s the only option.

Has anyone found a good method, workaround, or best practice for this kind of precise scroll threshold in Webflow?

Thanks a lot in advance :folded_hands:

2

Hi there,

While Webflow doesn’t have a built-in feature to change navbar color at exactly 100vh scroll point, you can achieve this effect using a combination of scroll animations and interactions. Here’s a practical approach:

Create a transparent div element that’s 100vh in height and place it at the top of your page. Then, set up a scroll animation on your navbar that triggers when the viewport reaches the bottom of this div. You can do this by applying a scroll animation to your navbar and setting the “First Move” trigger to occur when the 100vh div comes into view.

For the color change itself, use the background-color property in your navbar’s scroll animation settings. This will create a smooth transition as users scroll past the 100vh point.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hi there @SirKMR ,

see this demo → sticky navbar

if you know a bit javascript, you can use this function otherwise i can help you. you have to create the classes for this.

<script>
document.addEventListener('DOMContentLoaded', () => {
const navbar = document.getElementById('main-navbar');
const viewportHeight = window.innerHeight;

function changeNavbarColor() {
if (window.scrollY > viewportHeight) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
}
window.addEventListener('scroll', changeNavbarColor);
changeNavbarColor();
});
</script>