Bootstrap Scrollspy Plugin

The scrollspy is a navigation mechanism which checks scrollable area on webpage and activates a link to inform where the scrollbar is situated in a list. It automatically update targets on navigation bar based on scroll position. If we have different sections of a page which contain large amount of data, then we can use links to jump to a specific section in the scrollable area. It specifies the visitors, on which page they are currently.

It works in two directions: one is, navigates to an item and second, shows the displayed item in the scrollable area in the navigation list. The advantage of using this plugin is, we can save the time and content can be accessible more easily to the users.

The following examples demonstrate use of different techniques used for implementing the scrollspy in Bootstrap. If you have any questions about bootstrap scrollspy plugin, please write it in the comments section.

Bootstrap Scrollspy via Data Attributes

We can easily create scrollspy behavior to navigation by using data-spy=”scroll” in the target division in which element is to be spied. We use the attribute, data-target to link to the navigation ID which uses the ID or class of the parent element within the .nav component. The following is an example:

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.