diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index 2bd0a73474..674b8f0d8f 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -122,7 +122,6 @@ - title: Buttons - title: Collapse - title: Carousel - - title: Affix - title: Examples pages: diff --git a/docs/assets/css/src/docs.css b/docs/assets/css/src/docs.css index b4eed38178..346726ebd0 100644 --- a/docs/assets/css/src/docs.css +++ b/docs/assets/css/src/docs.css @@ -528,14 +528,10 @@ body { /* * Side navigation * - * Scrollspy and affixed enhanced navigation to highlight sections and secondary + * Scrollspy and enhanced navigation to highlight sections and secondary * sections of docs content. */ -/* By default it's not affixed in mobile views, so undo that */ -.bs-docs-sidebar.affix { - position: static; -} @media (min-width: 768px) { .bs-docs-sidebar { padding-left: 20px; @@ -618,35 +614,11 @@ body { } } -/* Show and affix the side nav when space allows it */ +/* Show the side nav when space allows it */ @media (min-width: 992px) { .bs-docs-sidebar .nav > .active > ul { display: block; } - /* Widen the fixed sidebar */ - .bs-docs-sidebar.affix, - .bs-docs-sidebar.affix-bottom { - width: 213px; - } - .bs-docs-sidebar.affix { - position: fixed; /* Undo the static from mobile first approach */ - top: 20px; - } - .bs-docs-sidebar.affix-bottom { - position: absolute; /* Undo the static from mobile first approach */ - } - .bs-docs-sidebar.affix-bottom .bs-docs-sidenav, - .bs-docs-sidebar.affix .bs-docs-sidenav { - margin-top: 0; - margin-bottom: 0; - } -} -@media (min-width: 1200px) { - /* Widen the fixed sidebar again */ - .bs-docs-sidebar.affix-bottom, - .bs-docs-sidebar.affix { - width: 263px; - } } diff --git a/docs/javascript/affix.md b/docs/javascript/affix.md deleted file mode 100644 index 2d53c72169..0000000000 --- a/docs/javascript/affix.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -layout: page -title: Affix ---- - -## Example - -The subnavigation on the right is a live demo of the affix plugin. - -## 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.** - -### Position 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: - -- 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. - -### 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 %} -
- ... -
-{% endhighlight %} - -### Via JavaScript - -Call the affix plugin via JavaScript: - -{% highlight js %} -$('#myAffix').affix({ - offset: { - top: 100, - bottom: function () { - return (this.bottom = $('.footer').outerHeight(true)) - } - } -}) -{% 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"`. - -
- - - - - - - - - - - - - - - - - - - - - - - -
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 plugin 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.
-
diff --git a/docs/migration.md b/docs/migration.md index 26139b818b..c73fcaeae4 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -17,6 +17,7 @@ For a broader overview, see [what's new](http://blog.getbootstrap.com/DEAD-LINK- - Switched from LESS to SCSS for our source CSS files. - Added a new grid tier for ~`480px` and below. - Dropped Glyphicons icon font. +- Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. - Refactored nearly all components to use more unnested classes instead of children selectors. - Non-responsive usage of Bootstrap is no longer supported. - Dropped the online Customizer in favor of more extensive setup documentation. diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 5e297fc75e..09f5698348 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -61,11 +61,6 @@ } -// For Affix plugin -.affix { - position: fixed; -} - // Alignment .text-left { text-align: left; } .text-right { text-align: right; }