Nav bar scroll sections

Design help Animations & Interactions
1

I’ve got 2 nav bars, one at the top and I want it to be visible until it hits section story where the other nav bar white will replace nav bar black. But when I scroll up I want nav bar white to stay at the top until it hits the section hero where the nav bar black replaces.

Here is my public share link: https://preview.webflow.com/preview/raymond-pearl?utm_source=raymond-pearl&preview=0af2b0099e86d327c1d69dfc8745c18c&mode=preview

2

Hi tim.a

This is a way you could do it:

  1. Take both nav bars out of the sections and put them in the body set to fixed. Then they will stay at the top of the viewport when you scroll. Set nav bar black with 100% opacity and nav bar white to 0% opacity.
  2. Create a ‘while scrolling in view’ animation that’s triggered by your hero section. The animation needs to be set to 0% when fully visible and 100% when fully invisible.
  3. This animation needs to do 2 things - make nav bar black disappear and at the same time make nav bar white appear.
  4. To make nav bar black disappear set it’s initial state to be 100% opacity at 95% of the way through the animation and to transition to 0% opacity by 100% of the animation.
  5. To make nav bar white appear simultaneously set it’s initial state to 0% opacity at 95% of the way through the animation and to transition to 100% opacity by 100% of the animation.

Then nav bar black fades out while nav bar white fades in just at the point when the nav bar reaches the end of the hero section and start of the story section. Nav bar white stays visible for the remainder of the page. The reverse will automatically happen when you scroll up the page. You’ll have to see if the transition looks smooth when you’ve done it. It may need tweaking. I’d also set the z index of the black nav bar to be greater than the white.

You can also do this with just one nav bar with elements that change opacity as you scroll.

Let me know if any of that doesn’t make sense. I know it’s a bit complicated!