<h2 id="scrollspy-usage">Usage</h2>
+ <h3>Requires relative positioning</h3>
+ <p>No matter the implementation method, scrollspy requires the use of <code>position: absolute;</code> on the element you're spying on. In most cases this is the <code><body></code>.</p>
+
<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>
+{% highlight css %}
+body {
+ position: relative;
+}
+{% endhighlight %}
{% highlight html %}
<body data-spy="scroll" data-target=".navbar-example">
...
{% endhighlight %}
<h3>Via JavaScript</h3>
- <p>Call the scrollspy via JavaScript:</p>
+ <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
{% highlight js %}
$('body').scrollspy({ target: '.navbar-example' })
{% endhighlight %}
projects / thirdparty / bootstrap.git / commitdiff
