diff options
| -rw-r--r-- | scss/helpers/_position.scss | 17 | ||||
| -rw-r--r-- | site/content/docs/4.3/helpers/position.md | 11 |
2 files changed, 23 insertions, 5 deletions
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index e0c4c2c11..63fe4504a 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -18,10 +18,17 @@ z-index: $zindex-fixed; } -.sticky-top { - @supports (position: sticky) { - position: sticky; - top: 0; - z-index: $zindex-sticky; +// Responsive sticky top +@supports (position: sticky) { + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .sticky#{$infix}-top { + position: sticky; + top: 0; + z-index: $zindex-sticky; + } + } } } diff --git a/site/content/docs/4.3/helpers/position.md b/site/content/docs/4.3/helpers/position.md index 921e47a9f..c44002ae9 100644 --- a/site/content/docs/4.3/helpers/position.md +++ b/site/content/docs/4.3/helpers/position.md @@ -31,3 +31,14 @@ Position an element at the top of the viewport, from edge to edge, but only afte {{< highlight html >}} <div class="sticky-top">...</div> {{< /highlight >}} + +## Responsive sticky top + +Responsive variations also exist for `.sticky-top` utility. + +{{< highlight html >}} +<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div> +<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div> +<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div> +<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div> +{{< /highlight >}} |