Community forum for knowledge and support

Updated 9 months ago

Hiding a Secondary Navigation Bar When Scrolling Up to a Specific Element

At a glance

The community member has implemented a secondary navigation bar that appears when a specific element is scrolled into view on their website. However, they are having trouble hiding the navbar when scrolling back up to that specific element. They have provided a link to a preview of their website and are asking for help on how to implement this functionality.

Useful resources

Hello! I love the navigation bar that https://diagram.com/ has where a secondary navigation bar appears from the top of the viewport when the “magic wand” element is scrolled into view.

I implemented this onto my own website, but I’m having trouble hiding the navbar once I scroll up to a specific element. (Read only: https://preview.webflow.com/preview/takbuilds?utm_medium=preview_link&utm_source=desig[…]s&preview=6eea89e9a3e5e81aeb4f34b98f9ee9b0&workflow=preview)

Currently, the secondary navbar appears when the .portfolio_component is scrolled into view, offset by 50%.

I want the navbar to hide when I scroll up and reach the .portfolio_component element again. How do I implement this?

Thank you so much for your help

Add a reply
Sign up and join the conversation on Slack