All topics

Intersection observer: change nav link color when section is in viewport

needtheanswers

6 months ago

I want the my nav links to change when a specific section is in the viewport. It should work like in the video attached (built in webflow, don´t mind the ui lol) How can I achieve this?
I tried to use @Jacob Kofoed´s intersection observer package and also the some code from Claude that I put in a custom action. However I wasn´t able to make this work. Has anyone built something similar or could point me in the right direction?

Thanks a lot
Lucas G

6 months ago

You shouldn't need additional code
The code is already in the package
Wrap the sections you want in the observer and add a threshold
Probably like 0.5 or 0.75 (50-75%) and the root element would be your main page container
I haven't played around with the package though
Lucas G

6 months ago

It seems to ahve a chagne event which you could use to trigger the style (ie CSS Class) on the nav links
needtheanswers

6 months ago

Sorry, maybe my post was a bit confusing. I first tried using the package but I was struggling so I used the custom code instead but couldn‘t make it work either.
I did it the way you described it but couldn’t make it work. I‘ll try it again as soon as I get home, thanks @Lucas G
needtheanswers

6 months ago

I was expecting to get back the ids of my elements so that I can set the class but all I get is "intersection-observer-XXXXXX. https://toddle.dev/projects/turquoise_yoda_autonomous_tahr/branches/start/components/Scroll%20Intersection%20Observer%20Test?leftpanel=design&canvas-width=800&canvas-height=800&rightpanel=events&mode=design&selection=nodes.F1-nc3OqoKw1tcZv_pe2R.events.Change.actions.0
@needtheanswers
I was expecting to get back the ids of my elements so that I can set the class but all I get is "intersection-observer-XXXXXX. https://toddle.dev/projects/turquoise_yoda_autonomous_tahr/branches/start/components/Scroll%20Intersection%20Observer%20Test?leftpanel=design&canvas-width=800&canvas-height=800&rightpanel=events&mode=design&selection=nodes.F1-nc3OqoKw1tcZv_pe2R.events.Change.actions.0
Lucas G

6 months ago

In that setup the observer will always be in the viewport
@Lucas G
In that setup the observer will always be in the viewport
needtheanswers

6 months ago

Sorry, this may sound silly now but I don´t quite get it. I changed the root element but it´s still not working as expected. How exactly would I set this up to achieve what I´m looking for?
needtheanswers

6 months ago

or do I need to repeat the a div that has the intersection observer in it?
@needtheanswers
or do I need to repeat the a div that has the intersection observer in it?
Lucas G

6 months ago

Yes
needtheanswers

6 months ago

But how would I then get the id of the div?

Intersection observer: change nav link color when section is in viewport

needtheanswers

Lucas G

Lucas G

needtheanswers

needtheanswers

Lucas G

needtheanswers

needtheanswers

Lucas G

needtheanswers