How does scrollspy work

The Bootstrap scrollspy has basically two components — the target e. Rest of the thing is self explanatory, such as the. You may also add scrollspy manually using the JavaScript — just call the scrollspy Bootstrap method with the id or class selector of the navbar in your JavaScript code.

There are certain options which may be passed to scrollspy Bootstrap method to customize the functionality of a scrollspy. Options can be passed via data attributes or JavaScript. Finds which section the spied element is in. The value auto will choose the best method get scroll coordinates. With the HTML ready, we are all set to add some style.

Let's see the key style pieces commented briefly:. As we will be working closely with the DOM, we need to get all the elements we need first. Also we will declare the additional variables we will be using. The following is a key part of the puzzle. This function translate the nav element to show only the selected link, using the activeIndex value.

Code has been added to clipboard! Reading time 3 min. Contents 1. Bootstrap Scrollspy: Main Tips 2. Creating A Scrollspy 3. Vertical Menu Scrollspy 4. Bootstrap Scrollspy: Summary. Example Copy. Try it Live. Bootstrap scrollspy targets the navigation bar contents automatically on scrolling the area. In this article, we will see how to implement the scrollspy in Bootstrap.

We will implement the scrollspy in 2 ways: Horizontal scrollspy Vertical scrollspy We need to import the Bootstrap CDN libraries to use the scrollspy functionality. We will include the libraries from the official bootstrap website.

There are a few requirements in order to scrollspy works properly: Attention reader! Bootstrap nav component or list group is necessary to include. Require position : relative: on the element for which spying is applied, generally in the body tag. Implementing horizontal scrollspy: We will create a navbar using a nav tag in our body.

The navbar will contain three items. The navbar should be fixed at the top in order to scrollspy works properly. Some attributes are added with the elements for the implementation of this feature to the body tag.

Attributes values: data-spy: It is used to spy the current position in which the user is scrolling.