mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Responsive sticky top (#29158)

Browse Source
This commit is contained in:
jahanzaibsuleman07
2019-09-13 23:15:20 +05:00
committed by XhmikosR
parent 49469ca0dc
commit d99ff902f8
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
scss/helpers/_position.scss
View File

@@ -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;
}
}
} }
} }

11
site/content/docs/4.3/helpers/position.md
View File

@@ -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 >}}