OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Sticky links menu with react-intersection-observer

  • Thread starter Thread starter Linn
  • Start date Start date
L

Linn

Guest
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:


  1. 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


  2. 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.
<p>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.</p>
<p>The problems I'm facing currently is:</p>
<ol>
<li><p>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: <a href="https://i.sstatic.net/1KgkyfA3.png" rel="nofollow noreferrer">enter image description here</a></p>
</li>
<li><p>The links should be in the center of the viewport at all times, but currently they are moving as I'm scrolling.</p>
</li>
</ol>
<p>Here's a <a href="https://codesandbox.io/p/sandbox/gr...ar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D" rel="nofollow noreferrer">codesandbox</a> for example. Ive added backgroundcolor to see exactly when the active link is in view to debug easier...</p>
<p>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.</p>
Continue reading...
 
Top