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.
<p>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.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</p>
</div>
</div>
</div><!-- /example -->
</div>
## Usage
<h2id="scrollspy-usage">Usage</h2>
### Requires relative positioning
<h3>Requires relative positioning</h3>
No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`.
<p>No matter the implementation method, scrollspy requires the use of <code>position: relative;</code> on the element you're spying on. In most cases this is the <code><body></code>.</p>
### 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.
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p>
</div>
</div>
<divclass="bs-callout bs-callout-info">
<divclass="bs-callout bs-callout-info">
<h4>Non-<code>:visible</code> target elements ignored</h4>
<h4>Non-<code>:visible</code> target elements ignored</h4>
<p>Target elements that are not <ahref="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
<p>Target elements that are not <ahref="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
</div>
</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:
<h3>Methods</h3>
<h4>.scrollspy('refresh')</h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<divclass="table-responsive">
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
