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 () {

Usage

+

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.

+ +

Positioning via CSS

+

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:

+
    +
  1. To start, the plugin adds .affix-top to indicate the element is in it's top-most position. At this point no CSS positioning is required.
  2. +
  3. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's code CSS).
  4. +
  5. If a bottom offset is defined, scrolling past that should replace .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.
  6. +
+

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

-

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.

{% highlight html %} -
...
+
+ ... +
{% endhighlight %} -
-

Requires independent styling ;)

-

- 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. -

-
-

Via JavaScript

Call the affix plugin via JavaScript:

{% highlight js %}