# 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-scrollspy`attribute to any element to enable the plugin.

#### The module also exposes an `$scrollspy`service

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