picocss/docs/js/src/scrollspy.js

/*
 * Scrollspy
 * Automatically update nav targets based on scroll position
 *
 * Require `most-visible.js` (https://github.com/andyexeter/most-visible)
 *
 * Pico.css - https://picocss.com
 * Copyright 2019-2021 - Licensed under MIT
 */

import * as MostVisible from './most-visible.js';

export const scrollspy = {
  mostVisible() {
    new MostVisible();
  },

  // Config
  minWidth: '992px',
  interval: 75,
  targets: {
    sections: '[role="document"] > section',
    nav: 'main aside nav',
    active: 'active',
  },

  // Init
  init() {
    if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
      this.setActiveNav();
      this.scrollStop();
    }
  },

  // Set active section in nav
  setActiveNav() {
    // Get active section
    let currentSection = mostVisible(this.targets.sections).getAttribute('id');

    // Remove all active states
    let links = document.querySelectorAll(
      this.targets.nav + ' a.' + this.targets.active
    );
    links.forEach(
      function (link) {
        link.classList.remove(this.targets.active);
      }.bind(this)
    );

    // Set active state
    let activeLink = document.querySelector(
      this.targets.nav + ' a[href="#' + currentSection + '"]'
    );
    activeLink.classList.add(this.targets.active);

    // Open details parent
    activeLink.closest('details').setAttribute('open', '');
  },

  // Scroll stop
  scrollStop() {
    let isScrolling;
    window.addEventListener(
      'scroll',
      function (event) {
        window.clearTimeout(isScrolling);
        isScrolling = setTimeout(
          function () {
            this.setActiveNav();
          }.bind(this),
          this.interval
        );
      }.bind(this),
      false
    );
  },
};

export default scrollspy;