CSS position sticky layout with examples

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

Demo on CodePen

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

Demo on CodePen

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

...
}

Demo on CodePen

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

Demo on CodePen