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 need to use Webflow’s Interactions panel combined with a small amount of custom code to detect scroll direction.

1. Prepare Your Navbar Element

• Select your navbar element in the Webflow Designer.
• Make sure the navbar has a class (e.g., .navbar) for targeting with interactions and code.
• Set its position to fixed (top) so it stays at the top of the viewport.

2. Set Up a Scroll Interaction

Webflow’s built-in scroll triggers don’t include scroll direction detection, so you’ll need to handle this with custom code.

3. Add the Show/Hide Navbar Animation

• Go to Interactions > Page trigger > While page is scrolling and skip this step — instead:
• Use Element-based animations that are triggered via JavaScript.

But you still need animations prepared:

• Select the navbar.
• Go to Interactions panel, click +, and create a new animation called "Hide Navbar".
• Add a Move animation to move the navbar -100% on the Y-axis (up and out).
• Set duration to 0.3s.
• Clone it and rename it "Show Navbar".
• Set the move to 0% on Y-axis (back into view).

4. Add Custom Code to Detect Scroll Direction

Inside your project, go to Page Settings, scroll to the Before tag custom code section, and add:

let lastScrollTop = 0;const navbar = document.querySelector('.navbar');window.addEventListener('scroll', function() {  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;    if (scrollTop > lastScrollTop) {    // scrolling down    navbar.setAttribute('data-scroll', 'down');    Webflow.require('ix2').actions.trigger({      id: 'HIDE_NAVBAR_ANIMATION_ID',      group: 'HIDE_NAVBAR_ANIMATION_NAME'    });  } else {    // scrolling up    navbar.setAttribute('data-scroll', 'up');    Webflow.require('ix2').actions.trigger({      id: 'SHOW_NAVBAR_ANIMATION_ID',      group: 'SHOW_NAVBAR_ANIMATION_NAME'    });  }    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For mobile or negative scrolling});

Note: Replace HIDE_NAVBAR_ANIMATION_ID and SHOW_NAVBAR_ANIMATION_ID with the actual IDs of your animations. Webflow doesn't expose these directly, so a simpler and more reliable method is explained below.

5. Alternate Code Using Simple Class Toggle

An easier way is:

• Instead of triggering Webflow interactions via JavaScript, simply toggle classes for hide and show, and use combo-class-based animations in Webflow.

In the Before </body> section:

let lastScrollTop = 0;const navbar = document.querySelector('.navbar');window.addEventListener('scroll', function() {  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;  if (scrollTop > lastScrollTop) {    navbar.classList.add('nav-hidden');    navbar.classList.remove('nav-visible');  } else {    navbar.classList.add('nav-visible');    navbar.classList.remove('nav-hidden');  }  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;});

Then in Webflow:

• Create two interactions: one for .nav-hidden and one for .nav-visible.
• Set up Element Trigger > Class Changed.
• Animate the navbar to move out/in on Y-axis depending on the state.

6. Publish and Test on Mobile

• Publish your Webflow site.
• Test scrolling behavior on a device or using Chrome’s responsive tools to ensure the navbar hides/shows correctly.

Summary

To create a scroll-aware mobile navbar in Webflow:

• Use a fixed navbar with a custom class.
• Build Webflow interactions for hide/show movements.
• Use JavaScript to detect scroll direction and toggle classes or trigger animations.
• Add logic in the custom code area and test thoroughly on mobile.

This method offers smooth UX especially useful for content-heavy, mobile-first designs.