I’m trying to build a sticky menu with links using react-intersection-observer for mobile view.
When scrolling into the section with the links, i want the full section to get fixed so it looks like the user is only scrolling the links itself. The active link will be in bold/ another color so its visible. When last links is viewed, the section should then snap out of the fixed/ sticky position and continue onwards.
The problems I’m facing currently is:
-
The links have too much space between them and when changing it, it stops working. The goal is to make it look something like this: enter image description here
-
The links should be in the center of the viewport at all times, but currently they are moving as I’m scrolling.
Here’s a codesandbox for example. Ive added backgroundcolor to see exactly when the active link is in view to debug easier…
I’ve tried to change the height of the items, and stack them closer to each other. And add sticky to the menu as well but no luck.
Linn is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.