<div class="placeholder-content">
<section class="sticky-content">
<h2 class="sticky-content-title">
Sticky content is here (scroll to test)
</h2>
</section>
<h3 class="placeholder-title">
Page content is here
</h3>
</div>
<hr class="placeholder-separator">
<div class="placeholder-content">
<br>
<h3 class="placeholder-title">
Page content is here
</h3>
<section class="sticky-content">
<h2 class="sticky-content-title">
Sticky content is here (scroll to test)
</h2>
</section>
<h3 class="placeholder-title">
More content here
</h3>
</div>
/* Sticky Content
========================================================================== */
.sticky-content {
position: sticky;
top: 0;
z-index: 10;
background-color: #ffe4c4;
color: #FFFFFF;
padding: 3rem 20px;
}
.sticky-content-title {
margin: 0;
}
.placeholder-content {
height: 1000px;
background-color: yellow;
background: linear-gradient(180deg, rgba(255,255,0,1) 0%, rgba(255,140,0,1) 100%);
}
.placeholder-title {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding-left: 20px;
}
.placeholder-separator {
margin-top: 3rem;
margin-bottom: 3rem;
}