diff --git a/javascript.html b/javascript.html index 18d430f923..53bd00cd94 100644 --- a/javascript.html +++ b/javascript.html @@ -1729,24 +1729,26 @@ $('#myCarousel').on('slide.bs.carousel', function () { {% endhighlight %}
You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix
, affix-top
, and affix-bottom
. 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.
+ Affix toggles between three states/classes: affix
, affix-top
, and affix-bottom
. You must provide the styles for these classes yourself (independent of this plugin).
+ The affix-top
class should be in the regular flow of the document. The affix
class should be fixed to the page. And affix-bottom
should be positioned absolute. Note, affix-bottom
is special in that the plugin will place the element with js relative to the offset: { bottom: number }
option you've provided.
+
Call the affix plugin via JavaScript:
{% highlight js %} -$('#navbar').affix() + $('#myAffix').affix({ + offset: { + top: 100 + , bottom: function () { + return (this.bottom = $('.bs-footer').outerHeight(true)) + } + } + }) {% endhighlight %} -When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:
-{% highlight js %} -$('[data-spy="affix"]').each(function () { - $(this).affix('refresh') -}); -{% endhighlight %}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-offset-top="200"
.
offset: { x: 10 }
. Use a function when you need to dynamically provide an offset (useful for some responsive designs).offset: { top: 10 }
. Use a function when you need to dynamically provide an offset (useful for some responsive designs).