Streaming live at 10am (PST)

Help with anchor vertical navigation in one pager

#1

Hey guys, I’m trying to get a navigation similar to this one: https://whitetailgin.com that reacts and navigates to different sections in the home. I understand how anchor links work, but I’m having trouble with the positioning and the animations.

  1. How do you make it “sticky”? I’, trying to apply this: https://webflow.com/blog/build-a-sticky-aside-in-webflow but it’s too complicated for what I’m trying, I think.

  2. The animations. I can make the hover state of the links, but I don’t know how to make them react to the scrolling position (change when you reach the next section). How can you do that?

Thank you very much in advance

Cheers,

Raf


#2

I found a sort of similar case in the forums, but they were having trouble with some bug (not relevant to my question). I just want to know how to build it

1 Like
#3

https://v.usetapes.com/34109aJCMd

site : http://vertical-nav-menu.webflow.io/

Read only : https://preview.webflow.com/preview/vertical-nav-menu?utm_source=vertical-nav-menu&preview=a78222051e968b45814c89586c5079b8

1 Like
#4

Beautiful. Thank you, Vincent.

If you don’t mind me asking, there’s one additional specific interaction in the example I’d like to ask if you know:

When the navigation is on top of a white background, it’s lines are blue, but when the section is a color background, the lines and links of the navigation turn white. It’s subtle, but man it looks good. Do you happen to know if that is possible, and how to do it?

Thank you again for your help

Raf

1 Like
#5

You can add interactions (IX) with a scroll-into-view trigger to target certain classes and change their text color.

#6

I will look into that. Thank you :+1:t4:

1 Like