mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mark Otto
2014-03-09 15:19:26 -07:00
parent ce634a0ba7
commit 4d870af2aa
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/javascript.html
View File

@@ -665,8 +665,16 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<h2 id="scrollspy-usage">Usage</h2> <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> <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> <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 %} {% highlight html %}
<body data-spy="scroll" data-target=".navbar-example"> <body data-spy="scroll" data-target=".navbar-example">
... ...
@@ -680,7 +688,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
{% endhighlight %} {% endhighlight %}
<h3>Via JavaScript</h3> <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 %} {% highlight js %}
$('body').scrollspy({ target: '.navbar-example' }) $('body').scrollspy({ target: '.navbar-example' })
{% endhighlight %} {% endhighlight %}