How to Create a Sticky Navbar That Changes Style on Scroll in Webflow

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to create a sticky navbar that changes style on scroll in Webflow, without any external library.

Example

1. Create your navbar and assign it a class

In the Designer, select your Navbar. Give it the class navbar. Set its position to Fixed at the top of the page.

2. Create a "scrolled" state in your styles

In your global styles, create a navbar.scrolled variant with the properties you want: opaque background, drop shadow, reduced height. Example: background-color: #fff, box-shadow: 0 2px 8px rgba(0,0,0,0.1).

3. Add this script to the <body> of your page

Go to Page Settings > Before </body> tag and paste the following script.

const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', function {
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

4. Publish and test

Publish your site and scroll: the scrolled class is added as soon as you hit 50px of scrolling. Adjust the 50 value to fit your design.

Conclusion

Your navbar now changes style smoothly on scroll. Use cases:

• Transparent navbar on the hero that becomes opaque on scroll
• Reduce the navbar height to save space
• Change the logo color from light to dark