Need a little help swapping navs on scroll

Hello webflowers, I’ve created two navs that swap using interactions. I set up scroll into-view and the out-of-view. The problem is when the the user scrolls down past the section that triggers the swap, the nav I want to show (the darker one) becomes hidden. Obviously this is what’s expected but I am trying to think of a way to accomplish what I want.

It seems like there would be separate “top” and “bottom” scroll interactions for these things but I’m guessing that’s not how the web works.

I hope someone can chime in on how I can get this working. Thanks in advance.

My live site: https://soundixstudio.webflow.io

My public share link: https://preview.webflow.com/preview/soundixstudio?preview=c394132799285406a12b0741f28d6bdf

Hello @GodlessGlen,

I can suggest using “original” navbar as a triggering object: when it goes out of view- new navbar appear and opposite.

Cheers,
Anna

@sabanna I did it this way because I watched a tutorial from webflow that showed to do it this way (although I can’t find that tutorial any longer). Notice that my navbar is fixed so it’s not going out of view.

Hi @GodlessGlen, I took a quick peek at the site, but I only see one nav at the moment, have you removed the second nav? I am happy to take a look too :slight_smile:

@cyberdave I deleted the second nav but if I knew how to do this I would be using this technique.

I would add a 100% div into your nav container with the color you want to appear when you scroll out of the hero section; this div being initially hidden by an interaction and appearing when scrolling out.

@TomLamers Won’t I need two navs to do this?

Hey @GodlessGlen , @TomLamers is referring to the method used here with a color div which sits inside the navbar:
Live Page: http://nav-interaction.webflow.io/
Read-Only Link: https://preview.webflow.com/preview/nav-interaction?preview=e739aaa25604225024959ef9e9c9ccd2

This way you only have one nav instead of multiple. :slight_smile:

The color bar has an interaction on it to have an initial appearance of 0px height. Then when you scroll down to the next section, it goes to a height of 100%. Let me know if you have any questions please.

1 Like

@Waldo Thanks so much for the clarification. I’m going to try that. Right now have am trying it by having an empty div block underneath the nav and seeing if I can do it.

Now, just think when I go to tackle all of the 3d stuff. I tried messing around with that the other day and it wasn’t very clear to me what I was doing wrong. I consider myself someone who easily gets anything with computers and web design, music and video production, but webflow often throws me for a loop.

1 Like

@Waldo BTW, would just hiding and showing not give the same result?

Hey @GodlessGlen yes, setting initial display to Display: none and then the interaction to Display: Block. Would do the same trick, just no animation. Happy to help!

1 Like

@Waldo Ahh good point. And I am assuming that I am going to still need to next section down on the page as the scroll trigger.

The interaction just has to go on the first section and is based upon scrolling in and out of view of the first section. I usually put an offset of 25% for when the bar has to display.

@Waldo But that’s the problem I was running into and why I made this post. When I scrolled out of the view past the 1st section, the navbar would disappear.

I just realized that I can just nest the content. Then, the only time it would scroll out-of-view would be at the navbar. Duh. lol. Now if I can just figure out what the hell “loop” means.

Hey @GodlessGlen glad you got it figured out. Also, the Loop setting on interactions is for when you want an interaction to keep happening over and over once it’s been triggered once. Say like a moving up & back down interaction on an arrow when hovering. :slight_smile: Does that make sense?

Be sure to adjust Z-indexes as needed on items to make sure they are layered appropriately.

1 Like

@Waldo Thanks for helping me understand this more. Yeah, for some reason the Z indexing got out of whack so I’m gonna have to figure out what happened.

Sure thing @GodlessGlen :slight_smile: I set the nav-bar z-index to like 25,000 and the color bar behind it to 24,999 and that did the trick. That’s a really high z-index but it works :slight_smile:

1 Like

@Waldo I am confused as to why I needed to do this. You’d think that layering them properly would make it work. And last night when I was playing around with two separate navbars I wasn’t having this issue. Well, at least you reminded me about the Z indexing.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.