mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-01 07:46:47 +02:00
Code Issues Releases Wiki Activity

get affix actually working and update docs

Browse Source
This commit is contained in:
Jacob Thornton
2012-08-14 21:06:08 -07:00
parent 4bf93a2d76
commit dee57462e2
20 changed files with 95 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/javascript.html
View File

@@ -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">&lt;div data-spy="affix"&gt;...&lt;/body&gt;</pre>
<pre class="prettyprint linenums">&lt;div data-spy="affix" data-offset-top="200"&gt;...&lt;/body&gt;</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>