kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

update the affix docs a bit

This commit is contained in:
fat 2013-07-25 23:53:34 -07:00
parent f58827f24d
commit 7ae8db8b7e
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
javascript.html
View File

@ -1729,24 +1729,26 @@ $('#myCarousel').on('slide.bs.carousel', function () {
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Requires positioning</h4>
<p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.</p>
<h4>Requires independent styling ;)</h4>
<p>
Affix toggles between three states/classes: <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).
The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with js relative to the <code>offset: { bottom: number }</code> option you've provided.
</p>
</div>
<h3>Via JavaScript</h3>
<p>Call the affix plugin via JavaScript:</p>
{% highlight js %}
$('#navbar').affix()
$('#myAffix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})
{% endhighlight %}
<h3>Methods</h3>
<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>
{% highlight js %}
$('[data-spy="affix"]').each(function () {
$(this).affix('refresh')
});
{% 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-top="200"</code>.</p>
@ -1765,7 +1767,7 @@ $('[data-spy="affix"]').each(function () {
<td>offset</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 provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { top: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
</tr>
</tbody>
</table>