diff options
| author | Mark Otto <[email protected]> | 2014-03-09 15:19:26 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-03-09 15:19:26 -0700 |
| commit | 4d870af2aad36563883ac5751f52d9f0288a0673 (patch) | |
| tree | bfc0547af3315ac360055bf13b6c57173b53cbd6 /docs/javascript.html | |
| parent | ce634a0ba7ceb5f9da21b74aa084d31e2274e0f1 (diff) | |
| download | bootstrap-4d870af2aad36563883ac5751f52d9f0288a0673.tar.xz bootstrap-4d870af2aad36563883ac5751f52d9f0288a0673.zip | |
Fixes #12487: Document required use of position relative for scrollspy
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 48e07485a..d3eeeb5c2 100644 --- 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><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"> ... @@ -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 %} |