diff --git a/javascript.html b/javascript.html index 9b808c3649..b424f46f63 100644 --- a/javascript.html +++ b/javascript.html @@ -1933,22 +1933,27 @@ $('#myCarousel').on('slide.bs.carousel', function () {
Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning of your content.
+ +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.
Here's how the affix plugin works:
+.affix-top
to indicate the element is in it's top-most position. At this point no CSS positioning is required..affix
replaces .affix-top
and sets position: fixed;
(provided by Bootstrap's code CSS)..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 elemtn from there.Follow the above steps to set your CSS for either of the usage options below.
To easily add affix behavior to any element, just add data-spy="affix"
to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
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.
- 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 position: fixed
. And .affix-bottom
should be position: 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 %}