Seems like what’s happening there is some z-index trickery but I’m not sure. Seems like there’s two copies of the left sidebar - one with color and black text and one with white logo and white text and they overlap the different sections. Not sure how it’s done exactly though.
It uses a deprecated technique called Clip and uses two menus on a scroll interaction. It toggles a “block” for the light menu variant which is “display:none” until you reach the anchor. The Clip holds the other menu in place.
I’d say you could easily replicate such a functionality with the hover-scroll, effect other element, and change not the whole menu, but just the icon. Seems far less invasive.
See example 1 or 2 here.
Most important: don’t use a transition time, which is default 500ms.