rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

markdownify scrollspy

Browse Source
This commit is contained in:
Mark Otto 2014-07-12 02:42:19 -07:00
parent b1dc638458
commit 537cd1c1c3
1 changed files with 115 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/javascript/scrollspy.md
View File

@ -3,12 +3,11 @@ layout: page
title: Srollspy
---
<div class="bs-docs-section">
<h1 id="scrollspy" class="page-header">ScrollSpy <small>scrollspy.js</small></h1>
## Example in navbar
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.
<div class="bs-example">
<nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
@ -51,21 +50,25 @@ title: Srollspy
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
</div><!-- /example -->
</div>
<h2 id="scrollspy-usage">Usage</h2>
## Usage
<h3>Requires relative positioning</h3>
<p>No matter the implementation method, scrollspy requires the use of <code>position: relative;</code> on the element you're spying on. In most cases this is the <code>&lt;body&gt;</code>.</p>
### Requires relative positioning
No matter the implementation method, scrollspy requires the use of `position: relative;` 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.
<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">
...
@ -78,24 +81,30 @@ body {
</body>
{% endhighlight %}
<h3>Via JavaScript</h3>
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
### Via JavaScript
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
{% highlight js %}
$('body').scrollspy({ target: '.navbar-example' })
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
<div class="bs-callout bs-callout-danger">
<h4>Resolvable ID targets required</h4>
<p>Navbar links must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the DOM like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.</p>
</div>
<div class="bs-callout bs-callout-info">
</div>
<div class="bs-callout bs-callout-info">
<h4>Non-<code>:visible</code> target elements ignored</h4>
<p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p>
</div>
</div>
### Methods
#### .scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
<h3>Methods</h3>
<h4>.scrollspy('refresh')</h4>
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
{% highlight js %}
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
@ -103,9 +112,11 @@ $('[data-spy="scroll"]').each(function () {
{% endhighlight %}
<h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="table-responsive">
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -124,10 +135,11 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
</div>
<h3>Events</h3>
<div class="table-responsive">
### Events
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -142,10 +154,9 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</div><!-- ./bs-table-responsive -->
</div>
{% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
{% endhighlight %}
</div>