diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 20 |
1 files changed, 9 insertions, 11 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index f9ede2f2b..f6594caaf 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -84,7 +84,7 @@ ================================================== --> <div class="row"> <div class="span3 bs-docs-sidebar"> - <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80"> + <ul class="nav nav-list bs-docs-sidenav"> <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li> <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li> <li><a href="#modals"><i class="icon-chevron-right"></i> Modal</a></li> @@ -1596,7 +1596,6 @@ $('.carousel').carousel({ <h1>Affix <small>bootstrap-affix.js</small></h1> </div> - <h2>Example</h2> <p>The subnavigation on the left is a live demo of the affix plugin.</p> @@ -1605,13 +1604,13 @@ $('.carousel').carousel({ <h2>Usage</h2> <h3>Via data attributes</h3> - <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. When the affix offsets are satisified, an <code>.affix</code> class is added to the element. </p> + <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p> - <pre class="prettyprint linenums"><div data-spy="affix">...</body></pre> + <pre class="prettyprint linenums"><div data-spy="affix" data-offset-top="200">...</body></pre> <div class="alert alert-info"> <strong>Heads up!</strong> - It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation. + It's up to you to manage the position of a pinned element. This is done by styling <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. </div> <h3>Via JavaScript</h3> @@ -1619,16 +1618,15 @@ $('.carousel').carousel({ <pre class="prettyprint linenums">$('#navbar').affix()</pre> <h3>Methods</h3> - <h4>.scrollspy('refresh')</h4> - <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p> + <h4>.affix('refresh')</h4> + <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p> <pre class="prettyprint linenums"> $('[data-spy="affix"]').each(function () { $(this).affix('refresh') }); </pre> - <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-y=""</code>.</p> + <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> <table class="table table-bordered table-striped"> <thead> <tr> @@ -1641,9 +1639,9 @@ $('[data-spy="affix"]').each(function () { <tbody> <tr> <td>offset</td> - <td>number | object</td> + <td>number | function | object</td> <td>10</td> - <td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>.</td> + <td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td> </tr> </tbody> </table> |