Scrollspy scrollspy.js

mgcrea.ngStrap.scrollspy

Examples

The subnavigation on the left is a live demo of the scrollspy plugin.

Plugin dependency

Scrollspy require the helpers.dimensions module to be loaded.

      
        <ul class="nav bs-sidenav">
          <li data-target="#modals" bs-scrollspy>
            <a href="#modals">Modal</a>
            <ul class="nav">
              <li data-target="#modals-examples" bs-scrollspy><a href="#modals-examples">Examples</a></li>
              <li data-target="#modals-usage" bs-scrollspy><a href="#modals-usage">Usage</a></li>
            </ul>
          </li>
        </ul>

        
        <ul class="nav bs-sidenav" bs-scrollspy-list>
          <li>
            <a href="#modals">Modal</a>
            <ul class="nav">
              <li><a href="#modals-examples">Examples</a></li>
              <li><a href="#modals-usage">Usage</a></li>
            </ul>
          </li>
        </ul>

Usage

Append a bs-scrollspyattribute to any element to enable the plugin.

The module also exposes an $scrollspyservice

Available for programmatic use (mainly inside a directive as it requires an element).

        
          var scrollspy = $scrollspy(element, options);

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
target string '' Required target selector.
offset number 0 Pixels to offset from top of screen when calculating position of scroll.

Default options

You can override global defaults for the plugin with $scrollspyProvider.defaults

        
          angular.module('myApp')
          .config(function($scrollspyProvider) {
            angular.extend($scrollspyProvider.defaults, {
              animation: 'am-fade-and-slide-top',
              placement: 'top'
            });
          })