How can I implement a navbar that shows on scroll-up and hides on scroll-down in Webflow? This feature is particularly useful for mobile browsing.

To create a navbar that hides on scroll-down and shows on scroll-up in Webflow, you'll need to use a combination of Webflow interactions and a bit of custom JavaScript since Webflow's native interactions don’t track scroll direction directly.

1. Prepare Your Navbar

• Select your Navbar in the Navigator.
• Give it a unique Selector/Class Name, such as scroll-navbar.
• Make sure it's fixed position at the top and set to 100% width.

2. Add Custom Attributes for Scroll Tracking

• Go to Page Settings > Before </body> tag section.
• You’ll insert a small JavaScript snippet to detect scroll direction (provided in Step 4).

3. Add Interaction Styles

• In the Style panel, set an interaction-ready state:
• Add a transform on the navbar and set move up -100%.
• Name this style something like hide-nav.
• Return to the default state (transform: none) for the visible state.

4. Add JavaScript for Scroll Direction Detection

Paste the following in Page Settings > Footer Before </body>:

Without a code block, input this inline:

<script> let lastScroll = 0; const navbar = document.querySelector('.scroll-navbar'); window.addEventListener('scroll', () => { const currentScroll = window.pageYOffset; if (currentScroll > lastScroll && currentScroll > 100) { // Scrolling down navbar.style.transform = 'translateY(-100%)'; navbar.style.transition = 'transform 0.3s ease'; } else if (currentScroll < lastScroll) { // Scrolling up navbar.style.transform = 'translateY(0)'; navbar.style.transition = 'transform 0.3s ease'; } lastScroll = currentScroll; }); </script>

• .scroll-navbar must match your class name exactly.
• The threshold 100 ensures the navbar doesn’t hide immediately at the top.

5. Publish and Test

• Publish your site and test on mobile and desktop.
• Scroll down to see the navbar hide, and scroll up to show it again.

Summary

To make a Webflow navbar show on scroll-up and hide on scroll-down, use a fixed navbar, apply transform transitions, and insert a custom JavaScript snippet that detects scroll direction. This approach provides a smooth, mobile-friendly experience without relying fully on Webflow’s native interactions.