Scrollspy

Scrollspy is used track certain elements and update bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Points to remember
  • It must be used on a Bootstrap's nav component or list group.
  • Scrollspy requires position: relative; on the element you're spying on, usually the <body>.
  • When you want spy on elements other than the <body>, you must set height and overflow-y: scroll;.
  • Anchors (<a>) are required and must point to an element with that id.

After implementation, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.

How to use

Scrollspy can added via data attributes or via javascript.

Create a bootstrap's nav component. On the body element add the data attribute data-spy="scroll" and set data-target="<target-id>" where <target-id> is the id or the class name of the navigation bar. The scrollable elements must match the ID of the links inside the navbar's list items (<div id="section-one"> matches <a href="#section-one">). The dropdown items will be highlighted as well.

Basic Navbar

When you scroll the area below the navbar, the active class change. The dropdown items will be highlighted as well.

611

Add data-offset attribute which is used to set pixels to offset from top when calculating position of scroll.

Scrollspy on Nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.

611
Scroll spy with list-group

Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.

611
Usage
Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>
Via JavaScript

After adding position: relative; in your CSS, call the scrollspy via JavaScript.

$('body').scrollspy({ target: '#navbar-example' })
Note
Note

Resolvable ID targets required

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>.

Note

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

JavaScript Behaviors

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')
})

.scrollspy('dispose')

Destroys an element's scrollspy.

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 Type Description
activate.bs.scrollspy This event fires on the scroll element whenever a new item becomes activated by the scrollspy.
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents