The Scrollspy plugin automatically updates navigation links based on the scroll position. Its basic implementation adds the **.active** class to the corresponding navigation link as you scroll, based on the scroll position. If you want to use the Scrollspy plugin functionality separately, you need to include **scrollspy.js**. Alternatively, as mentioned in the (#) chapter, you can include _bootstrap.js_ or the minified version _bootstrap.min.js_. ## Usage You can add Scrollspy behavior to a top navigation: * **Via data attributes**: Add **data-spy="scroll"** to the element you want to spy on (usually the body). Then add the **data-target** attribute with the ID or class of the parent element containing the Bootstrap **.nav** components. For it to work properly, you must ensure that the body contains elements with IDs that match the links you want to spy on. ... ... * **Via JavaScript**: You can call the Scrollspy via JavaScript, selecting the element to spy on, and then calling the **.scrollspy()** function: $('body').scrollspy({ target: '.navbar-example' }) ### Example The following example demonstrates the use of the Scrollspy plugin via data attributes: ## Example [Try it »](#) The result is as shown below:  ## Options Options can be passed via data attributes or JavaScript. The following table lists these options: | Option Name | Type/Default | Data Attribute Name | Description | | --- | --- | --- | --- | | offset | number _Default: 10_ | data-offset | Pixels to offset from top when calculating position of scroll. | ## Methods **.scrollspy('refresh')**: When calling the scrollspy method via JavaScript, you need to call the **.refresh** method to update the DOM. This is useful when any elements in the DOM have changed (i.e., you added or removed some elements). The syntax for using this method is as follows. $('').each(function () { var $spy = $(this).scrollspy('refresh') }) ### Example The following example demonstrates the usage of the **.scrollspy('refresh')** method: ## Example $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); }); [Try it »](#) The result is as shown below:  ## Events The following table lists the events used in Scrollspy. These events can be used as hooks in functions. | Event | Description | Example | | --- | --- | --- | | activate.bs.scrollspy | This event fires whenever a new item becomes activated by the scrollspy. | $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something... }) | ### Example The following example demonstrates the usage of the **activate.bs.scrollspy** event: ## Example $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("Currently you are viewing - " + currentItem); }) }); [Try it »](#) The result is as shown below:  * * * ## More Examples ### Creating a Horizontal Scrollspy The following example demonstrates how to create a horizontal Scrollspy: ## Example [Try it »](#) ### How to Create a Vertical Scrollspy The following example demonstrates how to create a vertical Scrollspy: ## Example [Try it »](#)