article-toc.js

The toc.js file is used to manage the “scrolling-section-highlight effect” experience on the table of contents found in the navigation/sidebar-right.html partial layout.

How it works

If the page has an element with the ID #TableOfContents, this script collects the associated links and highlights them based on scrolling behavior:

  • Scrolling Down: it highlights the next h2 or h3 as soon as it comes into view.
  • Scrolling Up: it highlights the previous h2 or h3 as soon as the lowest one exits view.

Source code 

document.addEventListener("DOMContentLoaded", () => {
  // Get all TOC links
  const tocLinks = document.querySelectorAll("#TableOfContents a");

  // Function to highlight the currently viewed section
  function highlightInView() {
    const sections = document.querySelectorAll("h2, h3"); // You may need to adjust the selector based on your HTML structure

    // Define the top offset (50px in this example)
    const offset = 50;

    // Loop through the sections to find the currently viewed one
    sections.forEach((section) => {
      const rect = section.getBoundingClientRect();

      // Adjust the condition with the offset
      if (
        rect.top + offset >= 0 &&
        rect.bottom <= window.innerHeight + offset
      ) {
        // Section is in view
        const sectionId = section.id;
        tocLinks.forEach((link) => {
          if (link.getAttribute("href").substring(1) === sectionId) {
            // Remove the highlight class from all TOC links
            tocLinks.forEach((tocLink) => {
              tocLink.classList.remove("text-brand");
            });
            // Add the highlight class to the currently viewed TOC link
            link.classList.add("text-brand");
          }
        });
      }
    });
  }

  // Attach the scroll event listener to the window
  window.addEventListener("scroll", highlightInView);
});
article-tiles.js layout-glossary.js