Responsive sticky top (#29158)
This commit is contained in:
parent
49469ca0dc
commit
d99ff902f8
|
@ -18,10 +18,17 @@
|
||||||
z-index: $zindex-fixed;
|
z-index: $zindex-fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticky-top {
|
// Responsive sticky top
|
||||||
@supports (position: sticky) {
|
@supports (position: sticky) {
|
||||||
position: sticky;
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
top: 0;
|
@include media-breakpoint-up($breakpoint) {
|
||||||
z-index: $zindex-sticky;
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||||
|
|
||||||
|
.sticky#{$infix}-top {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: $zindex-sticky;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,3 +31,14 @@ Position an element at the top of the viewport, from edge to edge, but only afte
|
||||||
{{< highlight html >}}
|
{{< highlight html >}}
|
||||||
<div class="sticky-top">...</div>
|
<div class="sticky-top">...</div>
|
||||||
{{< /highlight >}}
|
{{< /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 >}}
|
||||||
|
|
Loading…
Reference in New Issue