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"`.
-
-
-
-
-
- Name |
- type |
- default |
- description |
-
-
-
-
- offset |
- number | function | object |
- 10 |
- Pixels 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. |
-
-
- target |
- selector | node | jQuery element |
- the window object |
- Specifies the target element of the affix. |
-
-
-
-
-
-### Events
-
-Bootstrap's affix plugin exposes a few events for hooking into affix functionality.
-
-
-
-
-
- Event Type |
- Description |
-
-
-
-
- affix.bs.affix |
- This event fires immediately before the element has been affixed. |
-
-
- affixed.bs.affix |
- This event is fired after the element has been affixed. |
-
-
- affix-top.bs.affix |
- This event fires immediately before the element has been affixed-top. |
-
-
- affixed-top.bs.affix |
- This event is fired after the element has been affixed-top. |
-
-
- affix-bottom.bs.affix |
- This event fires immediately before the element has been affixed-bottom. |
-
-
- affixed-bottom.bs.affix |
- This 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; }