From d17801265e3562e5386b3445b84915618f5a81d7 Mon Sep 17 00:00:00 2001 From: Florian Lacreuse Date: Thu, 16 Dec 2021 09:27:00 +0100 Subject: [PATCH] Add sticky bottom utility (#35518) Co-authored-by: XhmikosR --- .bundlewatch.config.json | 2 +- scss/helpers/_position.scss | 8 +++++++- site/assets/scss/_component-examples.scss | 6 ++++-- site/content/docs/5.1/components/navbar.md | 12 ++++++++++-- site/content/docs/5.1/helpers/position.md | 21 ++++++++++++++++++++- 5 files changed, 42 insertions(+), 7 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 8749403007..5c04c131f2 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -22,7 +22,7 @@ }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "6.85 kB" + "maxSize": "7 kB" }, { "path": "./dist/css/bootstrap.css", diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index 31851eb721..59103d9436 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -16,7 +16,7 @@ z-index: $zindex-fixed; } -// Responsive sticky top +// Responsive sticky top and bottom @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @@ -26,5 +26,11 @@ top: 0; z-index: $zindex-sticky; } + + .sticky#{$infix}-bottom { + position: sticky; + bottom: 0; + z-index: $zindex-sticky; + } } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 208654ae03..f81a0af188 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -159,7 +159,8 @@ margin: -1rem -1rem 1rem; } - .fixed-bottom { + .fixed-bottom, + .sticky-bottom { position: static; margin: 1rem -1rem -1rem; } @@ -169,7 +170,8 @@ .sticky-top { margin: -1.5rem -1.5rem 1rem; } - .fixed-bottom { + .fixed-bottom, + .sticky-bottom { margin: 1rem -1.5rem -1.5rem; } } diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index 8d245d10f9..57754e9b42 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -450,9 +450,9 @@ Use any of the responsive containers to change how wide the content in your navb ## Placement -Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. +Use our [position utilities]({{< docsref "/utilities/position" >}}) to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, stickied to the top (scrolls with the page until it reaches the top, then stays there), or stickied to the bottom (scrolls with the page until it reaches the bottom, then stays there). -Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/css-sticky)**. +Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. {{< example >}} {{< /example >}} +{{< example >}} + +{{< /example >}} + ## Scrolling Add `.navbar-nav-scroll` to a `.navbar-nav` (or other navbar sub-component) to enable vertical scrolling within the toggleable contents of a collapsed navbar. By default, scrolling kicks in at `75vh` (or 75% of the viewport height), but you can override that with the local CSS custom property `--bs-navbar-height` or custom styles. At larger viewports when the navbar is expanded, content will appear as it does in a default navbar. diff --git a/site/content/docs/5.1/helpers/position.md b/site/content/docs/5.1/helpers/position.md index d54c1c7955..8b333bdfcd 100644 --- a/site/content/docs/5.1/helpers/position.md +++ b/site/content/docs/5.1/helpers/position.md @@ -24,7 +24,7 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo ## Sticky top -Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers. +Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. ```html
...
@@ -40,3 +40,22 @@ Responsive variations also exist for `.sticky-top` utility.
Stick to the top on viewports sized LG (large) or wider
Stick to the top on viewports sized XL (extra-large) or wider
``` + +## Sticky bottom + +Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it. + +```html +
...
+``` + +## Responsive sticky bottom + +Responsive variations also exist for `.sticky-bottom` utility. + +```html +
Stick to the bottom on viewports sized SM (small) or wider
+
Stick to the bottom on viewports sized MD (medium) or wider
+
Stick to the bottom on viewports sized LG (large) or wider
+
Stick to the bottom on viewports sized XL (extra-large) or wider
+```