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:

Clean styles issue

We only use the navbar active combo by code (So for webflow this is “not associated” style).

The best idea is to put somewhere in your site an empty div with this combo.
Wrap this div and use display: none, or any other trick to hide this div (Put inside password page and so on).

1 Like

Thank you- This has helped me much more than others trying to accomplish the same task. :+1:

1 Like