diff options
| author | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-08-02 18:30:59 -0700 |
| commit | 089d434895fbe901d838e4dfb29cdb5941c47ab6 (patch) | |
| tree | dac25fa32c4420bfb3b1199c61898f04b71eaebe /docs/javascript/affix.md | |
| parent | f200c39657c5011e12bace716c59b2242d48c077 (diff) | |
| parent | 033f1654b07f7764a54e5b290e5cf36f688b95a3 (diff) | |
| download | bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.tar.xz bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.zip | |
Merge branch 'master' into derp
Conflicts:
_config.yml
dist/css/bootstrap-theme.css.map
dist/css/bootstrap.css
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
docs/_includes/components/glyphicons.html
docs/_includes/css/forms.html
docs/_includes/css/tables.html
docs/_includes/getting-started/browser-device-support.html
docs/_includes/header.html
docs/_includes/js/affix.html
docs/_includes/js/alerts.html
docs/_includes/js/buttons.html
docs/_includes/js/dropdowns.html
docs/_includes/js/overview.html
docs/_includes/js/popovers.html
docs/_includes/js/tooltips.html
docs/_includes/nav/javascript.html
docs/assets/css/docs.min.css
docs/assets/css/src/docs.css
docs/assets/js/customize.min.js
docs/assets/js/docs.min.js
docs/assets/js/raw-files.min.js
docs/browser-bugs.html
docs/dist/css/bootstrap-theme.css.map
docs/dist/css/bootstrap.css
docs/dist/css/bootstrap.css.map
docs/dist/css/bootstrap.min.css
docs/examples/blog/index.html
docs/examples/carousel/index.html
docs/examples/cover/index.html
docs/examples/dashboard/index.html
docs/examples/grid/index.html
docs/examples/jumbotron-narrow/index.html
docs/examples/jumbotron/index.html
docs/examples/justified-nav/index.html
docs/examples/navbar-fixed-top/index.html
docs/examples/navbar-static-top/index.html
docs/examples/navbar/index.html
docs/examples/non-responsive/index.html
docs/examples/offcanvas/index.html
docs/examples/signin/index.html
docs/examples/starter-template/index.html
docs/examples/sticky-footer-navbar/index.html
docs/examples/sticky-footer/index.html
docs/examples/theme/index.html
docs/examples/tooltip-viewport/index.html
less/code.less
less/panels.less
less/variables.less
Diffstat (limited to 'docs/javascript/affix.md')
| -rw-r--r-- | docs/javascript/affix.md | 21 |
1 files changed, 10 insertions, 11 deletions
diff --git a/docs/javascript/affix.md b/docs/javascript/affix.md index f588f49ba..2d53c7216 100644 --- a/docs/javascript/affix.md +++ b/docs/javascript/affix.md @@ -17,9 +17,8 @@ The affix plugin toggles between three classes, each representing a particular s 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. +- 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 CSS). +- If a bottom offset is defined, scrolling past it 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. @@ -38,14 +37,14 @@ To easily add affix behavior to any element, just add `data-spy="affix"` to the Call the affix plugin via JavaScript: {% highlight js %} - $('#my-affix').affix({ - offset: { - top: 100 - , bottom: function () { - return (this.bottom = $('.footer').outerHeight(true)) - } +$('#myAffix').affix({ + offset: { + top: 100, + bottom: function () { + return (this.bottom = $('.footer').outerHeight(true)) } - }) + } +}) {% endhighlight %} @@ -82,7 +81,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap ### Events -Bootstrap's affix class exposes a few events for hooking into affix functionality. +Bootstrap's affix plugin exposes a few events for hooking into affix functionality. <div class="table-responsive"> <table class="table table-bordered table-striped"> |
