I have sticky horizontal panel https://skr.sh/sAbFQJdT4g4, but she overlaps my header section https://skr.sh/sAbTtGZONrn. So, need new option offset equals height of this panel.

Currently, when scrolling down, active classes are added and removed. Then scrolling back up, the last item (first in the nav) keeps its active class, even if the correponding section is way past it.

This looks confusing, especially in a page where the content + nav are a bit lower, e.g. below a large hero section. When you scroll back up, and the section is way low, the first item still keeps its active class.

Looks like a file may be missing.

kimyvgy.github.io/:49 GET https://kimyvgy.github.io/simple-scrollspy/demo/dist/simple-scrollspy.min.js net::ERR_ABORTED 404

(index):52 Uncaught ReferenceError: scrollSpy is not defined at window.onload ((index):52)

Hey man, it's a great script, and it seems to work very well. I would suggest adding a smooth scroll though, because it really gives the viewer a sense of what is going on instead of just checking the browser scrollbar.

The code below was used with classic page nav.

    function setActiveUrl(navlinkClass, activeClass) {

        navlinkClass = navlinkClass || "nav-link";
        activeClass = activeClass || "active";

        var path = window.location.pathname;
        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        var navlinks = document.querySelectorAll(`.${navlinkClass}`);
        var activeNavlinks = document.querySelectorAll(`.${navlinkClass} .${activeClass}`);

        (activeNavlinks || []).forEach(e => {
            e.classList.remove(activeClass);
        });

        (navlinks || []).forEach(e => {
            var href = e.getAttribute("href");
            var isRootMatch = path == "" && href == "/";
            if (href == path || isRootMatch)
                e.classList.add(activeClass);
            
        });
    }

Hello, is there a possibility to detect sections through a horizontal axis and not vertical? I tried to change the values "Top" and "height" by "left" and "width" on the JS file without success. Thank you.

Allow the user to target other containers that scroll other than the body. I have pulled the master and made some modifications myself, but they are pretty janky and could be done cleaner by the main developer.

While trying to get the Bootstrap scrollspy plugin to work with a list of anchors with no ordered or unordered lists, I came across this little plugin. Gave it a try but to no avail. But I kept playing with it and discovered an undocumented necessity.

For the elements (tabs) that will be given the "active" class when scrolling takes place, they all need the "data-scrollspy="#[desired_value]"" attribute. It functions as an href attribute on an anchor; its value must correspond to the value of an element's id on the page. Without this attribute, this plugin won't work at all.

Somehow this necessary attribute isn't documented. I discovered it while studying the html of the example. Things worked perfectly once I added it to my page.

Hope this helps.

This is just a simple addition to allow the user to choose a scrolling container other than the body. The code is probably terrible and can be improved, but it works and could be a good start for the main developer to add it.

This will close #9 by adding options for smooth scrolling feature. For example:

1. Using via CDN:

<script src="/path/to/dist/simple-scrollspy.min.js"></script>
<script>
  window.onload = function () {
    scrollSpy('#main-menu', {
      sectionClass: '.scrollspy',
      menuActiveTarget: '.menu-item',
      offset: 100,
      smoothScroll: true,
    })
  }
</script>

2. Using with NPM package:

import jumpTo from 'jump.js'

scrollSpy('#main-menu', {
  // ....,

  // enable smooth scroll:
  // - true: enable with the default scroll behavior
  // - false: disable this feature
  // - object: enable with some options that will pass to `window.scroll` or `smoothScrollBehavior`
  //   + Default behavior: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
  //   + Jump.js: https://www.npmjs.com/package/jump.js
  smoothScroll: {
    duration: 1000, // only works with jump.js,
    offset: -100,   // only works with jump.js,
  },

  // customize scroll behavior,
  // - default: window.scroll({ behavior: 'smooth', ...smoothScroll })
  // - customize: you can define your scroll behavior. Ex: use `jump.js`, jQuery, .etc
  smoothScrollBehavior: function(element, options) {
    // use `jump.js` instead of the default scroll behavior
    jumpTo(element, options)
  }
})

The "dist" folder will make conflict. It need to be stored as attachment on specify release version.

1. Remove dist folder
2. Update instruction in README.md
3. Attach dist files into Release