0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00

markdownify affix docs

This commit is contained in:
Mark Otto 2014-07-13 00:29:43 -07:00
parent d85e6af91b
commit d1f699765e

View File

@ -3,29 +3,29 @@ layout: page
title: Affix title: Affix
--- ---
<div class="bs-docs-section"> ## Example
<h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>
<h2 id="affix-examples">Example</h2> The subnavigation on the right is a live demo of the affix plugin.
<p>The subnavigation on the right is a live demo of the affix plugin.</p>
<hr class="bs-docs-separator"> ## Usage
<h2 id="affix-usage">Usage</h2> Use the affix plugin via data attributes or manually with your own JavaScript. **In both situations, you must provide CSS for the positioning and width of your affixed content.**
<p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
<h3>Positioning via CSS</h3> ### Position via CSS
<p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<p>Here's how the affix plugin works:</p>
<ol>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
</ol>
<p>Follow the above steps to set your CSS for either of the usage options below.</p>
<h3>Via data attributes</h3> The affix plugin toggles between three classes, each representing a particular state: `.affix`, `.affix-top`, and `.affix-bottom`. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.
<p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.</p>
Here's how the affix plugin works:
- To start, the plugin adds `.affix-top` to indicate the element is in its top-most position. At this point no CSS positioning is required.
- Scrolling past the element you want affixed should trigger the actual affixing. This is where `.affix` replaces `.affix-top` and sets `position: fixed;` (provided by Bootstrap's code CSS).
- If a bottom offset is defined, scrolling past that should replace `.affix` with `.affix-bottom`. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add `position: absolute;` when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.
Follow the above steps to set your CSS for either of the usage options below.
### Via data attributes
To easily add affix behavior to any element, just add `data-spy="affix"` to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.
{% highlight html %} {% highlight html %}
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
@ -33,8 +33,10 @@ title: Affix
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Via JavaScript</h3> ### Via JavaScript
<p>Call the affix plugin via JavaScript:</p>
Call the affix plugin via JavaScript:
{% highlight js %} {% highlight js %}
$('#my-affix').affix({ $('#my-affix').affix({
offset: { offset: {
@ -47,10 +49,11 @@ title: Affix
{% endhighlight %} {% endhighlight %}
<h3>Options</h3> ### Options
<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-top="200"</code>.</p>
<div class="table-responsive"> Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset-top="200"`.
<div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
@ -73,15 +76,15 @@ title: Affix
<td>the <code>window</code> object</td> <td>the <code>window</code> object</td>
<td>Specifies the target element of the affix.</td> <td>Specifies the target element of the affix.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive --> </div>
### Events
<h3>Events</h3> Bootstrap's affix class exposes a few events for hooking into affix functionality.
<p>Bootstrap's affix class exposes a few events for hooking into affix functionality.</p>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
@ -116,5 +119,4 @@ title: Affix
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.table-responsive -->
</div> </div>