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.