Streaming live at 10am (PST)

How to change navbar background on scroll by minimal Javascript (Useful for sticky navbar)

"The Problem" - true to June-20 - no way to create global scroll interaction (One time for the entire site). For large sites, it’s harder to manually add the same scroll animation preset page by page (Only for simple background change).

https://university.webflow.com/lesson/show-hide-navbar-on-scroll-interactions

One “fast” solution - add/remove active class when the user scroll.
(Less than 1 minute).

1/5

ctr+k add navbar
image

2/5

Add navbar class (if you use another name you should update the js code)

3/5

Add background transition
image

4 /5

Add combo class and set any background you want. Then remove this class.

***Anytime you want to edit the active setting follow step 4. The active Will be added by code.

5/5. Copy-Paste before the body - publish and test.

custom code The code Copy Paste Before body:

<!-- add background on scroll to navbar -->
<script>
	/* check if navbar exists (to avoid js console errors) */
  let exists = $( ".navbar" ).length ? true : false;
  /* if user scroll add active class */
  $(window).on("scroll", function() {
    if(exists && $(window).scrollTop() > 0) {
      $(".navbar").addClass("active");
    } else if(exists) {
      /* remove active class */
      $(".navbar").removeClass("active");
    }
  });
</script>

**navbar is my webflow navbar class.
** active is the class from step 4

before scroll

After scroll: