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.

![](./position_sticky_sample01.png)

Create text and images area.

```html
<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` .

```scss
.section {
  display: flex;
}
```

Add `div` to text area for making text fixed.

```html
...

<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.

```scss
.sticky-item {
  position: sticky;
  top: 80px;
}
```

[Demo on CodePen](https://codepen.io/chocolat5/pen/KKBPyyx)

## 2. Sidebar (Table of Contents etc)

Example for a sidebar, table of contents etc.

![](./position_sticky_sample02.png)

Create text and sidebar area.

```html
<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` .

```scss
.wrap {
  display: flex;
}
```

Add `position: sticky` and the position to sidebar.

```scss
.sidebar {
  position: sticky;
  top: 4rem;
}
```

[Demo on CodePen](https://codepen.io/chocolat5/pen/dyjoZxb)

## 3. Split Screen Layout

Example for Split screen layout.

![](./position_sticky_sample03.png)

Create sections and wrap all sections with `div` .

```html
<div class="block_wrap">
  <section class="block block-1">
    
  </section>
  <section class="block block-2">
    
  </section>
  <section class="block block-3">
    
  </section>
  <section class="block block-4">
    
  </section>
</div>
```

Make split screen layout with `display: grid` .

```scss
.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.

```scss
.block {
...

  &-1 {
    grid-area: block1;
		position: sticky;
    top: 0;
    left: 0;
  }

...
}
```

[Demo on CodePen](https://codepen.io/chocolat5/pen/OJvegMd)

## 4. Parallax Scrolling Effect

Example for parallax scrolling effect.

Create sections with height greater than or equal to window height.

```html
<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.

```scss
.section {
  position: sticky;
  top: 0;
  left: 0;
}
```

[Demo on CodePen](https://codepen.io/chocolat5/pen/QWQZNRp)

CSS position sticky layout with examples

Tags