layout: docs title: Scrollspy description: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. group: components toc: true

How it works

Scrollspy has a few requirements to function properly:

  • If you're building our JavaScript from source, it [requires util.js]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
  • It must be used on a Bootstrap [nav component]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/) or [list group]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/list-group/).
  • Scrollspy requires position: relative; on the element you're spying on, usually the <body>.
  • When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.
  • Anchors (<a>) are required and must point to an element with that id.

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

Example in navbar

Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.

{% highlight html %}

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

{% highlight html %}

Example with list-group

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

{% highlight html %}

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.

{% highlight css %} body { position: relative; } {% endhighlight %}

{% highlight html %}

Via JavaScript

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

{% highlight js %} $(‘body’).scrollspy({ target: ‘#navbar-example’ }) {% endhighlight %}

{% capture callout %}

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>. {% endcapture %} {% include callout.html content=callout type=“danger” %}

{% capture callout %}

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. {% endcapture %} {% include callout.html content=callout type=“info” %}

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:

{% highlight js %} $(‘[data-spy=“scroll”]’).each(function () { var $spy = $(this).scrollspy(‘refresh’) }) {% endhighlight %}

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

Events

{% highlight js %} $(‘[data-spy=“scroll”]’).on(‘activate.bs.scrollspy’, function () { // do something… }) {% endhighlight %}