Streaming live at 10am (PST)

How to animate sub navbar on scroll

Hi everyone

I’m creating a navbar that has a sub navbar with links corresponding to the current page. The main navbar is supposed to be hidden when scrolled out of view, but the sub navbar should remain. The main navbar should become visible again when scrolling it into view.

When scrolling down the page and then up again, an empty space appears that I would like to remove:

I have tried to solve this with page scroll triggers, but I can only offset the main navbar’s height in percentage, which makes it look different depending on the page height.

‘Scroll into view’ ‘Element trigger’ is another alternative, but it causes the animation to start on page load, and therefore it doesn’t work when scrolling down and up again.

Would love to get some feedback on this!

Here is my site Read-Only: https://preview.webflow.com/preview/navbar-link-state?utm_medium=preview_link&utm_source=designer&utm_content=navbar-link-state&preview=cff08338ea89fdad949eb23fceeee3c9&mode=previewly-link

There must be some way to trigger the sub navbar to align with he navbar vertically as it gets into view (‘scroll into view’ doesn’t work because it triggers upon page load), but I have still not managed to figure out how.

I fixed this by making the sub navbar sticky, and by adding top: 0 and z-index: 1.