Simple Scrollspy Simple scrollspy is a lightweight javascript library without jQuery, no dependencies. It is used to make scrollspy effect for your menu, table of contents, etc. Only 1.94Kb.
This is a scrollspy demo for my menu in the navigation bar.
Install Via NPM: Install NPM package - https://www.npmjs.com/package/simple-scrollspy:
npm install simple-scrollspy The other way, you also can inject simple-scrollspy.min.js file into your HTML code:
<script src="/path/to/dist/simple-scrollspy.min.js"></script>Usages Easy for using, syntax just like this:
scrollSpy(menuElement, options) This little plugin will add active class into your existing menu item when you scroll your page to a matched section by ID. If you are giving it a try, make sure that you:
Added CSS for active class in your menu item. Because, this plugin do NOT include CSS. Added ID for your sections. Example:
const options = {
sectionClass: '.scrollspy', // Query selector to your sections
menuActiveTarget: '.menu-item', // Query selector to your elements that will be added active
class
offset: 100 // Menu item will active before scroll to a matched section 100px
}
// init: scrollSpy(document.getElementById('main-menu'), options)
// or shorter: scrollSpy('#main-menu', options) Inject static file
<script src="/path/to/dist/simple-scrollspy.min.js"></script> <script> window.onload = function () { scrollSpy('#main-menu', { sectionClass: '.scrollspy', menuActiveTarget: '.menu-item', offset: 100 }) } </script>Development $ yarn install $ yarn dev Helpful links Documentation Example See on NPM package Licence MIT