The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

<bodydata-spy="scroll"data-target=".navbar">...</body>

Via JavaScript

Call the scrollspy via JavaScript:

$('#navbar').scrollspy()

Heads up! Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

$('[data-spy="scroll"]').each(function(){

var $spy = $(this).scrollspy('refresh')

});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name

type

default

description

offset

number

10

Pixels to offset from top when calculating position of scroll.

Events

Event

Description

activate

This event fires whenever a new item becomes activated by the scrollspy.