Show and hide navigation bar on scroll

Set up a navbar interaction that responds on scroll.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Show and hide navigation bar on scroll

In this lesson:

  1. Create a trigger and animation to make the navbar disappear
  2. Create a trigger and animation to make the navbar reappear 

Create a trigger and animation to make the navbar disappear

  1. Select the navbar and make sure its position is fixed to the viewport
  2. In the Interactions panel, choose Start an Animation from the When Scrolled Down menu
  3. Name it (e.g., “nav leave”)
  4. Click the plus sign next to Timed actions
  5. Under Move change the Y-axis until the navbar is outside the viewport
  6. Adjust your easing curve and duration

Create a trigger and animation to make the navbar reappear

  1. Select the navbar
  2. In the Interactions panel, choose Start an Animation from the When Scrolled Up menu
  3. Name it (e.g., “nav enter”)
  4. Click the plus sign next to Timed actions
  5. Under Move change the Y-axis back to 0
  6. Adjust your easing curve and duration

Check your work in the preview.


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form