From d99ff902f8c7b849ccb283af69d6a8ac15356450 Mon Sep 17 00:00:00 2001
From: jahanzaibsuleman07 <jahanzaibsuleman@gmail.com>
Date: Fri, 13 Sep 2019 23:15:20 +0500
Subject: [PATCH] Responsive sticky top (#29158)
---
scss/helpers/_position.scss | 17 ++++++++++++-----
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 e0c4c2c110..63fe4504a2 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 921e47a9f5..c44002ae97 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 >}}
--
GitLab