tips / css
CSS position sticky layout with examples
December 30, 2022
Here’s CSS position: sticky layout examples. You also can demo on CodePen.
What is position sticky
position: sticky
is combined with relative
and fixed
. An element with position: sticky
is positioned based on the top/left/right/bottom
potision inside during user scroll. It is positioned fixed
until the end of sticky container (parent of sticky element).
1. Text + Images
Example for one or fewer text blocks with multiple images.
Create text and images area.
<section class="section">
<div class="text">
<div class="sticky-item">
Text area
</div>
</div>
<ul class="img">
<li class="img__item">
<img src="images/image01.jpg" alt="">
</li>
<li class="img__item">
<img src="images/image02.jpg" alt="">
</li>
...
<li class="img__item">
<img src="images/image08.jpg" alt="">
</li>
</ul>
</section>
Make text and image area horizontal with display: flex
.
.section {
display: flex;
}
Add div
to text area for making text fixed.
...
<div class="text">
<div class="sticky-item">
<h2 class="headline">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure d</p>
</div>
</div>
...
Add position: sticky
and the position to text area.
.sticky-item {
position: sticky;
top: 80px;
}
2. Sidebar (Table of Contents etc)
Example for a sidebar, table of contents etc.
Create text and sidebar area.
<section class="section">
<div class="wrap">
<aside class="sidebar">
<div class="toc sticky-item">
<h2>Sidebar</h2>
</div>
</aside>
<div class="content">
Text area
</div>
</div>
</section>
Make text and sidebar horizontal with display: flex
.
.wrap {
display: flex;
}
Add position: sticky
and the position to sidebar.
.sidebar {
position: sticky;
top: 4rem;
}
3. Split Screen Layout
Example for Split screen layout.
Create sections and wrap all sections with div
.
<div class="block_wrap">
<section class="block block-1">
<!-- fixed sextion -->
</section>
<section class="block block-2">
<!-- scrollable section -->
</section>
<section class="block block-3">
<!-- scrollable section -->
</section>
<section class="block block-4">
<!-- scrollable section -->
</section>
</div>
Make split screen layout with display: grid
.
.block_wrap {
display: grid;
grid-template-areas:
"block1 block2"
"block1 block3"
"block1 block4";
grid-template-columns: 50% 50%;
}
.block {
height: 100vh;
&-1 {
grid-area: block1;
}
&-2 {
grid-area: block2;
}
&-3 {
grid-area: block3;
}
&-4 {
grid-area: block4;
}
}
Add position: sticky
and the position to the fixed section.
.block {
...
&-1 {
grid-area: block1;
position: sticky;
top: 0;
left: 0;
}
...
}
4. Parallax Scrolling Effect
Example for parallax scrolling effect.
Create sections with height greater than or equal to window height.
<section class="section">
...
</section>
<section class="section">
...
</section>
<section class="section">
...
</section>
<section class="section">
...
</section>
Add position: sticky
and top: 0; left: 0;
to all sections.
.section {
position: sticky;
top: 0;
left: 0;
}