https://docs.mudfish.net/en/js/scrollSpy.js

1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8/* eslint-disable */
9(function scrollSpy() {
10  var OFFSET = 10;
11  var timer;
12  var headingsCache;
13
14  var findHeadings = function findHeadings() {
15    return headingsCache || document.querySelectorAll('.toc-headings > li > a');
16  };
17
18  var onScroll = function onScroll() {
19    if (timer) {
20      // throttle
21      return;
22    }
23
24    timer = setTimeout(function () {
25      timer = null;
26      var activeNavFound = false;
27      var headings = findHeadings(); // toc nav anchors
28
29      /**
30       * On every call, try to find header right after  <-- next header
31       * the one whose content is on the current screen <-- highlight this
32       */
33
34      for (var i = 0; i < headings.length; i++) {
35        // headings[i] is current element
36        // if an element is already active, then current element is not active
37        // if no element is already active, then current element is active
38        var currNavActive = !activeNavFound;
39        /**
40         * Enter the following check up only when an active nav header is not yet found
41         * Then, check the bounding rectangle of the next header
42         * The headers that are scrolled passed will have negative bounding rect top
43         * So the first one with positive bounding rect top will be the nearest next header
44         */
45
46        if (currNavActive && i < headings.length - 1) {
47          var heading = headings[i + 1];
48          var next = decodeURIComponent(heading.href.split('#')[1]);
49          var nextHeader = document.getElementById(next);
50
51          if (nextHeader) {
52            var top = nextHeader.getBoundingClientRect().top;
53            currNavActive = top > OFFSET;
54          } else {
55            console.error('Can not find header element', {
56              id: next,
57              heading: heading,
58            });
59          }
60        }
61        /**
62         * Stop searching once a first such header is found,
63         * this makes sure the highlighted header is the most current one
64         */
65
66        if (currNavActive) {
67          activeNavFound = true;
68          headings[i].classList.add('active');
69        } else {
70          headings[i].classList.remove('active');
71        }
72      }
73    }, 100);
74  };
75
76  document.addEventListener('scroll', onScroll);
77  document.addEventListener('resize', onScroll);
78  document.addEventListener('DOMContentLoaded', function () {
79    // Cache the headings once the page has fully loaded.
80    headingsCache = findHeadings();
81    onScroll();
82  });
83})();