Responsive sticky top (#29158)

diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index e0c4c2c1100b12f5ad590ffef222a0e5c104fde0..63fe4504a26f9309db20fe273d52ae6a3839a24e 100644 (file)
--- 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 921e47a9f557e700649a1f00ceba0fd7a447c5e2..c44002ae97ef5d294a3346010c4f714550eff495 100644 (file)
--- 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 >}}