From: Mark Otto Date: Sun, 9 Mar 2014 22:19:26 +0000 (-0700) Subject: Fixes #12487: Document required use of position relative for scrollspy X-Git-Tag: v3.2.0~398 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4d870af2aad36563883ac5751f52d9f0288a0673;p=thirdparty%2Fbootstrap.git Fixes #12487: Document required use of position relative for scrollspy --- diff --git a/docs/javascript.html b/docs/javascript.html index 48e07485ad..d3eeeb5c22 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -665,8 +665,16 @@ $('#myDropdown').on('show.bs.dropdown', function () {

Usage

Requires relative positioning

No matter the implementation method, scrollspy requires the use of position: absolute; on the element you're spying on. In most cases this is the <body>.

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.

+{% highlight css %} +body { + position: relative; +} +{% endhighlight %} {% highlight html %} ... @@ -680,7 +688,7 @@ $('#myDropdown').on('show.bs.dropdown', function () { {% endhighlight %}

Via JavaScript

Call the scrollspy via JavaScript:

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

{% highlight js %} $('body').scrollspy({ target: '.navbar-example' }) {% endhighlight %}