This script hides the navbar on scroll down and shows it on scroll up. Webflow can do this natively, but it requires adding it manually to each page, which can be tedious.

‍How to Use the Script:

1. Add navbar attribute
   1. navbar="1": Displays the navbar on desktop only.
   2. navbar="2": Displays the navbar on desktop and tablet.
   3. navbar="3": Displays the navbar on mobile only.
   4. navbar="1,3": Displays the navbar on desktop and mobile (excluding tablet).
   5. navbar="2,3": Displays the navbar on tablet and mobile.
2. Add the is-hidden class to the navbar for the hidden state. In this example, the navbar transforms by y -100% of its height. You can set the transition animation for both the show and hidden states to control the smoothness of the effect. Ensure the is-hidden class is saved somewhere so it's not removed when cleaning up classes.
3. there's also attribute navbar-height to match the height of attribute navbar.
4. Style is-scroll-up for when scrolling up (optional)
5. Copy the script and paste it just before the closing </body> tag. <script src="https://cdn.jsdelivr.net/gh/jeminids/webflow-codes@navbar-on-scroll_v1.2/navbar-on-scroll.min.js"></script>‍
6. It's done 🎉