diff --git a/javascript.html b/javascript.html index 9b808c364..b424f46f6 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 %}