Issue
I use angular with bootstrap for my project.
I have a header, which consists of tow parts, and a content area. When the resolution is small the header wraps.
Header and content on large screens
Header and content on small screens, wrapped
<div class="sticky row">
<div class="col-md-7" style="height: 50px; background-color: seagreen;">
Header A
</div>
<div class="col-md-5" style="height: 50px; background-color: skyblue;">
Header B
</div>
</div>
<div style="height: 1500px; width: 100%; background-color: slategray;">
any content<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
I also made the header sticky, so that my content flows beneath the header.
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
This works fine as you can see in this Stackblitz:
https://stackblitz.com/edit/angular-bootstrap-responsive-sticky
But for the small screend I want the Header B also to scroll beneath Header A and not be sticky.
As Header A and Header B are in one div I don’t know if there is any way to do this, when at the same time, I want to keep the wrapping of the header.
Thanks for any ideas 🙂
Solution
I have taken the header ratio to be 6:4 for large screens. The first division will be sticky by default and the second div will be sticky only for large screens.
HTML :
<div class="custom-col-6 sticky" style="height: 50px; background-color: seagreen;">
Header A
</div>
<div class="custom-col-4" style="height: 50px; background-color: skyblue;">
Header B
</div>
CSS :
.custom-col-4,
.custom-col-6 {
width: 100%;
display: inline-block;
}
@media (min-width: 768px) {
.custom-col-6 {
width: 60%;
}
.custom-col-4 {
width: 40%;
position: sticky;
top: 0;
}
}