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

transitions

scroll

animation

Code

<!-- Navigation Animation by Code & Wander https://www.codeandwander.com/ -->
<script>
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
    header.style.backgroundColor = 'white'; //Change target colour
  } else {
    header.style.backgroundColor = 'transparent'; //Change starting colour
  }
});
</script>

Copied!

Tutorial

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.