Skip to content

Dynamic TOC from Advent of JavaScript 2021 - Challenge 17

Notifications You must be signed in to change notification settings

mreed4/advent-21-toc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here we had to build a dynamic table of contents--i.e. when a heading appears on the page, a list item corresponding to the header is highlighted. As you scroll, and as a new header enters the bounds of a defined box, the next list item is highlighted accordingly.

This works with the IntersectionObserver API. Which was new to me (though I have seen the user-facing functionality before).

In this instance, rather than smashing my head against a wall, I Googled an indirect solution and found one on FreeCodeCamp. I made the code found in the FCC article work with the code in the challenge.

I further improved the challenge by moving the relevant parts of the code to a data structure. A series of IIFEs then render the page, and enable the required functionality.