From d1f699765e8bfcee7905ee795845e30eaf1e99ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Jul 2014 00:29:43 -0700 Subject: [PATCH] markdownify affix docs --- docs/javascript/affix.md | 178 ++++++++++++++++++++------------------- 1 file changed, 90 insertions(+), 88 deletions(-) diff --git a/docs/javascript/affix.md b/docs/javascript/affix.md index 46bee00d76..f588f49bac 100644 --- a/docs/javascript/affix.md +++ b/docs/javascript/affix.md @@ -3,29 +3,29 @@ layout: page title: Affix --- -
-

Affix affix.js

+## Example -

Example

-

The subnavigation on the right is a live demo of the affix plugin.

+The subnavigation on the right is a live demo of the affix plugin. -
+## Usage -

Usage

-

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

+Use the affix plugin via data attributes or manually with your own JavaScript. **In both situations, you must provide CSS for the positioning and width of your affixed 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 its top-most position. At this point no CSS positioning is required.
    2. -
  2. 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).
    3. -
  3. 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 element from there.
    4. -
-

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

+### Position via CSS -

Via data attributes

-

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.

+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: + +- To start, the plugin adds `.affix-top` to indicate the element is in its top-most position. At this point no CSS positioning is required. +- 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). +- 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 element from there. + +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. Use offsets to define when to toggle the pinning of an element. {% highlight html %}
@@ -33,8 +33,10 @@ title: Affix
{% endhighlight %} -

Via JavaScript

-

Call the affix plugin via JavaScript:

+### Via JavaScript + +Call the affix plugin via JavaScript: + {% highlight js %} $('#my-affix').affix({ offset: { @@ -47,74 +49,74 @@ title: Affix {% endhighlight %} -

Options

-

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

+### Options -
- - - - - - - - - - - - - - - - - - - - - - +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset-top="200"`. - -
Nametypedefaultdescription
offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
targetselector | node | jQuery elementthe window objectSpecifies the target element of the affix.
-
- - -

Events

-

Bootstrap's affix class exposes a few events for hooking into affix functionality.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event TypeDescription
affix.bs.affixThis event fires immediately before the element has been affixed.
affixed.bs.affixThis event is fired after the element has been affixed.
affix-top.bs.affixThis event fires immediately before the element has been affixed-top.
affixed-top.bs.affixThis event is fired after the element has been affixed-top.
affix-bottom.bs.affixThis event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affixThis event is fired after the element has been affixed-bottom.
-
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Nametypedefaultdescription
offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
targetselector | node | jQuery elementthe window objectSpecifies the target element of the affix.
+
+ +### Events + +Bootstrap's affix class exposes a few events for hooking into affix functionality. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event TypeDescription
affix.bs.affixThis event fires immediately before the element has been affixed.
affixed.bs.affixThis event is fired after the element has been affixed.
affix-top.bs.affixThis event fires immediately before the element has been affixed-top.
affixed-top.bs.affixThis event is fired after the element has been affixed-top.
affix-bottom.bs.affixThis event fires immediately before the element has been affixed-bottom.
affixed-bottom.bs.affixThis event is fired after the element has been affixed-bottom.