Navigation through pin stacking cards

[vlanesvit]

Hello,
 

I'm having some trouble navigating the pinned cards block.
 

In the menu on the left there are anchor links that, when clicked, should scroll to their block. Also, during normal scrolling, links should be marked with an active class when the block becomes visible.
 

Now, when clicked, the link scrolls to the top of the parent block, as far as I understand, because the cards are on top of each other.
 

What is the problem? How can I pin the scroll to the desired block?
 

I used these URLs to implement cards on top of each other and for navigation:
 

https://greensock.com/forums/topic/33597-stacking-cards-overlap/

And

https://gsap.com/community/forums/topic/35776-click-to-navigate-to-a-section-using-gsap/

See the Pen gOExGzZ by Vlanesvit (@Vlanesvit) on CodePen

[mvaneijgen]

What you can do is calculate how much each item takes up and then scroll to that value times the index of the anchor clicked. Hope it helps and happy tweening! 

 

See the Pen NWJvwMb?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[vlanesvit]

1 hour ago, mvaneijgen said:

Что вы можете сделать, так это подсчитать, сколько занимает каждый элемент, а затем прокрутить до этого значения, умноженного на индекс нажатой привязки. Надеюсь, это поможет и счастливого подросткового периода! 

 

 

 

Thank you very much for your help 😃
I'll also try to implement switching the active class when scrolling the card