@three11/scrollspy

Vanilla ES2017 module for scroll spy

Usage no npm install needed!

<script type="module">
  import three11Scrollspy from 'https://cdn.skypack.dev/@three11/scrollspy';
</script>

README

GitHub release GitHub issues GitHub last commit Github file size Build Status npm npm Analytics

ScrollSpy

A vanilla ES2017 module for scroll spy functionality.

Install

npm i @three11/scrollspy

or

yarn add @three11/scrollspy

or

Just download this repository and link the files located in dist folder:

<script src="path-to-scrollspy/dist/scrollspy.min.js"></script>

or

Include it from Unpkg CDN

<script src="//unpkg.com/@three11/scrollspy/dist/scrollspy.min.js"></script>

Usage

First, import the module:

import ScrollSpy from '@three11/scrollspy';

Then initialize a new instance of the module:

const scrollSpy = new ScrollSpy();

Settings

The default settings are:

linkCurrentClass      : 'current', // The class that will be applied to the current element
linksContainerSelector: '.js-scroll-spy-nav', // The container of the scroll spy navigation
sectionSelector       : '.js-scroll-spy-section', // The selector for the sections that will be monitored
headerOffset          : true, // Should calculate the header height
headerClass           : '.c-header', // The class of the header element

Demo

A minimal demo is available here

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007