Sticky sidebar for section navigation

Hi all,

I’m building a portfolio website with pretty long content on each page. To help with navigations, I wanted a sticky sidebar fixed on the left that you can click & changes text color based on where you are on the page. (see read-only link for demo)

My specific questions are -

  1. Is there a more efficient way to build out this ‘scroll-into-view’ interactions? (as you can see, I created ‘scroll-in’ and ‘scroll-out’ interactions for EACH sections, which would be very redundant given there are many sections on a page and several pages)

  2. Is there a way to hide this sidebar element in the Hero section and make it appear once you get to the 1st section? (idea is that the nav appears only when someone starts reading the content)

  3. Because 2 sections can be visible on the user’s viewport at the same time, my demo is not perfect in that it highlights 2 sections at the same time on the side bar. Any suggestions to fix this so that the sidebar only highlights one at a time?

I’ve been struggling with this for a while, so any inputs from you would be sooo much appreciated!

Edit: for some reason, the interactions i created AFTER you press the Toggle Preview button. Please do so to view what I meant above

Here is my public share link:

Upping my post, any help would be appreciated!