Scrollspy

Mobile-friendly interactive map library.

Bootstrap Scrollspy documentation

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-scrollspy/dist/hs-scrollspy.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of scroll nav
                    var scrollspy = new HSScrollspy($('body'), {
                      // !SETTING "resolve" PARAMETER AND RETURNING "resolve('completed')" IS REQUIRED
                      beforeScroll: function(resolve) {
                        if (window.innerWidth < 992) {
                          $('#navbarVerticalNavMenu').collapse('hide').on('hidden.bs.collapse', function () {
                            return resolve('completed');
                          });
                        } else {
                          return resolve('completed');
                        }
                      }
                    }).init();
                  });
                </script>

How it works

Scrollspy has a few requirements to function properly:

  • Scrollspy requires data-hs-scrollspy-options='{ "target": "#yourID" }' on <body> element and must point to an element with the target ID. And also, add the .js-scrollspy class to the element where this ID is placed.
  • Scrollspy requires position: relative; on the element, you’re spying on, usually the <body>.
  • When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
  • Anchors (<a>) are required and must point to an element with that ID.

When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

Example

Methods

Parameters Description Default value

topLevelComponent

 Сontainer inside which scroll will be 'html, body'

duration

 Scroll speed 400

easing

 Easing functions specify the speed at which an animation progresses at different points within the animation. https://api.jqueryui.com/easings/ 'linear'

offset | data-offset

 Pixels to offset from top when calculating position of scroll. 0

topLevelComponent

 Сontainer inside which scroll will be 'html, body'

target | data-target

 Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use jQuery offset method to get scroll coordinates. position will use jQuery position method to get scroll coordinates. null

method | data-method

 Specifies element to apply Scrollspy plugin. 'auto'

beforeScroll

 Callback function null

afterScroll

 Callback function null