mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-18 12:39:41 +03:00
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
This commit is contained in:
+10
-11
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user