themes/docsy/layouts/partials/toc.html

{{ partial "page-meta-links.html" . }}
{{ if not .Params.notoc }}
{{ with .TableOfContents }}
{{ if ge (len .) 200 }}
{{ . }}
{{ end }}
{{ end }}
{{ end }}

<script>
  $(function () {
    var $toc = $("#TableOfContents");
    if (!$toc || !$toc.length) {
      return;
    }
    var top = $toc.offset().top;
    $(window).on("scroll", debounce(setTop, 100))
    $(window).on("scroll", debounce(addActive, 30))

    function addActive() {
      var scrollValue = $(window).scrollTop();
      var topEle = null;
      $.each($('main h1, main h2, main h3'), function (index, item) {
        if ($(item).offset().top - 70 > scrollValue) {
          return
        }
        if (!topEle) {
          topEle = item
        } else if ($(item).offset().top >= $(topEle).offset().top) {
          topEle = item
        }
        if (topEle) {
          var id = $(item).attr('id');
          $toc.find('a').removeClass("active").end().find('a[href="' + '#' + id + '"]').addClass("active")
        }
      })
    }

    function setTop() {
      var scrollValue = $(window).scrollTop();
      if (scrollValue >= top - 70) {
        $toc.addClass('fixed')
      } else {
        $toc.removeClass('fixed')
      }
    }

    function debounce(fn, wait) {
      var timeout = null;
      return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, wait);
      };
    }
  })

</script>