Join the Webstudio community

Updated last month

Make navbar sticky on scroll

At a glance

The community member is looking for a way to add a token when starting to scroll on the page, which would allow them to make a navbar thinner and sticky when not at the top of the page. The comments suggest that currently, this can be achieved using JavaScript to add a class or ID and then target it with CSS. However, in the future, CSS will support this functionality as the language evolves, including with an animation engine. The community member acknowledges this future development and asks if they would also need to add the CSS styles (reduced height, position sticky) in custom code for now.

Hi, I'm looking for a way to add a token when starting to scroll on the page. It would allow for example to make a navbar thinner and sticky when you''re not at the top of the page.

Any idea?
J
O
J
4 comments
Hey for now you need javascript. Add a class or id in setting then target that with JS
In the future, CSS will support this as CSS evolves πŸ™‚
also with animation engine soon
Nice! I'm looking forward to this bright future haha. So for now I guess I also need to add the CSS styles (reduced height, position sticky) in custom code as well?
Add a reply
Sign up and join the conversation on Discord