Bootstrap Tutorial

CHAPTER
37
Bootstrap Scrollspy Plugin
The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on scroll position.
In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.
If you want to include this plugin functionality individually, then you will need scrollspy.js. Else, as mentioned in
the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
You can add scrollspy behavior to your topbar navigation:
Via data attributes: add data-spy="scroll" to the element you want to spy on (typically the body). Then add
attribute data-target with the ID or class of the parent element of any Bootstrap .navcomponent. For this to
work, you must have elements in the body of the page that have matching IDs of the links that you are spying
on.
...
...
...
Via JavaScript: You can invoke the scrollspy with JavaScript instead of using the data attributes, by selecting
the element to spy on, and then invoking the .scrollspy() function:
$('body').scrollspy({ target: '.navbar-example' })
EXAMPLE
The following example shows the use of scrollspy plugin via data attributes:
TUTORIALS POINT
Simply Easy Learning