ScrollTrigger last trigger not reachable

[steef]

Hi there
I'm working on an in-page side navigation that shows the active nav item based on the current content that is visible.
This can be triggered by scrolling on the page or clicking on the nav item. 

This page will, eventually, contain dynamic content. In some cases the first/last item of the content section will contain only little text.

This causes the issue that I can not trigger the nav item to get active because the panel does not get triggered.
Is there a way how to fix this?

(the issue is only visible on screens that are higher than the codepen example below)

Thanks in advance!


 

See the Pen VwBYLeX by Steef (@Steef) on CodePen

[Rodrigo]

Hi @steef and welcome to the GreenSock forums!

 

Sorry for the late response 🙏

 

This is something that would require quite a bit of logic to accommodate every single scenario and on top of that be fully responsive. The easiest way I can think of is to add an extra element at the bottom of the panels and give that element the height of the screen minus the height of the last panel (I added a very distinctive color so you can see it clearly). On top of that tinker a bit with the start and end points in order to put them at the top of the viewport in order to match the left sidebar links.

 

Here is a live example:

See the Pen mdjyjYE by GreenSock (@GreenSock) on CodePen

 

Hopefully this is helpful. Let us know if you have more questions.

 

Happy Tweening!

[steef]

Hi Rodrigo, thank you for your response (which in my opinion was fast 😼)  and trying to find a solution with me.
Since there is no - fairly easy - solution for this I think I'll go with adding some extra space

Have a lovely day!