Blur Effect after a certain amount of pixels scroll

I’ll keep looking in the forum for similar subjects and keep looking in the webflow university, but just in case someone has a quick answer

What I want is to put a background blur effect and a background color with a little opacity on my navbar after it starts scrolling. I want to turn it on after a certain amount of pixels, like a threshold, after 40 pixels they are on and once it is back below that threshold they are off.

Thank You All

Use javascript or if you want to use webflow interactions, put multiple version whith diferent blur value on top o each other in absolute position and in the interaction fade from one to another

1 Like

I like the idea I made something simpler for now. But I’ll keep this idea in mind. Thank You.