How to animate menu links when each section hits the screen top

Design help Animations & Interactions
1

Hello community,

I am a newbie here, trying to build my website. I am facing difficulty with regard to as described in the title.

https://question-4df70e.webflow.io/

I want to show viewers which section they are reading by highlighting the menu link while they scroll in the page. Also, this way, I can omit the page title at the top in every section. JFYR, the section sizes (heights) are all different.

Any help would be highly appreciated.

Thanks.

Here is my public share link: LINK
(how to access public share link)

https://question-4df70e.webflow.io/

2

Hey, @John_Rhee please share your read-only link so that we can help!

3

Oh… Okay. here you go:
https://preview.webflow.com/preview/question-4df70e?utm_medium=preview_link&utm_source=dashboard&utm_content=question-4df70e&preview=1e87459ab6068b2ef823b28d9b4dabcd&mode=preview

Thank you so much.

4

Hey, @John_Rhee welcome to webflow, If I understood your question properly you want your user to know on which section they by changing the active section property.

What I’ve done is added an ID to each section and an in-page link to individual section. By doing so webflow adds a “current” combo class and you can style it however you want.

Loom explanation to make things more clear.

Hope it helps :peace_symbol:

1 Like
5

Hi @Sachin. Thank you very much. I will give it a try.