Fixes #12487: Document required use of position relative for scrollspy

4d870af2 · Mark Otto · ce634a0b · 4d870af2
Commit 4d870af2 authored 11 years ago by Mark Otto
Hide whitespace changes
Inline Side-by-side

Showing

with 9 additions and 1 deletion
+9 -1
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -665,8 +665,16 @@ $('#myDropdown').on('show.bs.dropdown', function () {

  <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>&lt;body&gt;</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>&lt;body&gt;</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">
  ...
@@ -680,7 +688,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
 {% 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 %}