Bootstrap Scrollspy Plugin

The Bootstrap Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.

The Bootstrap scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page. The scrollspy will make your web page more elegant and accessible, if you are using the bookmark links for directing the visitors to the different sections of a page that has a huge amount of content.

Example -

Bootstrap Vertical Scrollspy Menu

You can also use vertical navigation pills as menu.

Example -

Explanation of Code

The Bootstrap scrollspy has basically two components — the target nav (e.g. navbar, nav tabs or pills) and the scrollable area to spy on, which is often the <body> section.

  • The data-spy="scroll" attribute (line no-01) is applied to the scrollable element that is being spied on, which is the <body> element.
  • The data-target attribute is added on the scrollable element with the ID or class of the parent element of the Bootstrap .nav component so that nav links can be targeted by the scrollspy for highlighting purpose.
  • The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Adjust the offset value if the targeted links are highlighting too early or too late. The default value is 10 pixels.