Code Tricks

Navigation background animation on scroll

Add a navigation background transition to all your pages with a few lines of code.

Created by

Code & Wander

See resource


<!-- Navigation Animation by Code & Wander -->
window.addEventListener('scroll', function() {
  var header = document.querySelector('.header'); //Change class to match yours
  var scrollPosition = window.scrollY || window.pageYOffset;

  if (scrollPosition > 100) { //Change offset = 'white'; //Change target colour
  } else { = 'transparent'; //Change starting colour


Steps & Description

Step 1

Copy and paste the code above in your before </body> tag.

Step 2

Customise the code to fit your design:

  • Change the starting and transition colours (currently set from transparent to white)
  • Change the offset (currently set at 100px)
  • Change the class targeted to match yours (currently .header)

Step 3

In the designer set a background color transition to the targeted header.

Tips & Notes

By using the above code instead of the native Webflow scroll animation, every page will behave the same, rather than being relative to the page length.

Related resources

No items found.