“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
2/5
Add navbar class (if you use another name you should update the js code)
3/5
Add background transition
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:
Custom CSS
You can add any custom CSS you want (Usefull for change hover of links, the display logo and so on). For example - “show black logo on scroll”:
.navbar.active .black-logo{
opacity: 1;
}
.navbar.active .white-logo{
opacity: 0;
}
***by position absolute put both logos one on each other.
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).
