nav scrollWatcher broken from skewed-sections

[angusm]

At initialization you grab all of the sections and their corresponding nav link. You keep an array of all of the sections so you can loop through them You keep an array of all of the nav links so you can loop through them You map each section element to its nav link element so you can update one based on the other quickly without having to re-run query selectors.

You have a function running every scrollMeasure using renderLoop Inside of the scrollMeasure function you loop through the elements and find the one that is the closest to having its top lined up with the top of the viewport, without its top being below the top of the viewport. (Use getVisibleDistanceFromRoot under dom/position/vertical) For finding the active section, you can use the max() function from toolbox under utils/array, and its score should be the result of getVisibleDistanceFromRoot unless the returned value is greater than 0, in which case return Number.NEGATIVE_INFINITY, that will cull any sections that haven't reached the top)

Then you can use your map, to grab the nav link that should be activated, add the appropriate CSS class, loop through all the other classes and remove the active CSS class.

[angusm]

renderLoop exists under utils/render-loop.ts

update()  {
 renderLoop.scrollMeasure(() => {
    // Figure out your elements to update
   renderLoop.scrollMutate(() => {
      // Change css classes using variables you determined in scrollMeasure
    });
   renderLoop.scrollCleanup(() => this.update()); // Setup the update for the next scroll event
});

[kadenzipfel]

https://github.com/nerdwise/nerdwise-website/pull/146