https://www.sustrax.com/components/section-nav/section-nav.js

1(function () {
2  function initSectionNav(nav) {
3    if (!nav || nav.getAttribute("data-nav-ready") === "true") {
4      return;
5    }
6
7    var links = Array.prototype.slice.call(nav.querySelectorAll("[data-section-nav-link]"));
8    var sections = links
9      .map(function (link) {
10        var id = link.getAttribute("data-target");
11        var section = id ? document.getElementById(id) : null;
12        return section ? { id: id, link: link, section: section } : null;
13      })
14      .filter(Boolean);
15
16    if (!sections.length) {
17      return;
18    }
19
20    function setActive(id) {
21      links.forEach(function (link) {
22        link.classList.toggle("is-active", link.getAttribute("data-target") === id);
23      });
24    }
25
26    var observer = new IntersectionObserver(
27      function (entries) {
28        entries.forEach(function (entry) {
29          if (entry.isIntersecting) {
30            var id = entry.target.getAttribute("id");
31            setActive(id);
32          }
33        });
34      },
35      { rootMargin: "-45% 0px -50% 0px", threshold: 0 }
36    );
37
38    sections.forEach(function (item) {
39      observer.observe(item.section);
40    });
41
42    nav.setAttribute("data-nav-ready", "true");
43  }
44
45  function init() {
46    var navs = document.querySelectorAll("[data-section-nav]");
47    navs.forEach(function (nav) { initSectionNav(nav); });
48  }
49
50  if (document.readyState === "loading") {
51    document.addEventListener("DOMContentLoaded", init);
52  } else {
53    init();
54  }
55})();