Position

Position helpers pin an element to the top or bottom (fixed-top, fixed-bottom) or keep it in view while its container scrolls (sticky-top, sticky-bottom and the responsive sticky-*-top variants). Every example runs inside its own scrollable frame, so scroll the frames to watch the bars stay put.

1Sticky page header

sticky-top keeps a section header visible while the content below it scrolls. Scroll the frame.

A checklist for your next website launch

We listen first, then build a plan around what you actually need.

Senior designers lead every project from the first sketch to the final file.

We combine strategy, design and technology to build brands that grow.

We measure success by how many clients come back and tell their friends.

We keep things simple, so you can focus on what matters to you.

Websites we build are fast, accessible and easy for your team to update.

Small teams, short feedback loops and no handoffs lost in translation.

Clear prices, honest advice and no surprises along the way.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
    <header class="sticky-top bg-body border-bottom px-3 py-2 fw-semibold">
      <i class="bi bi-journal-text" aria-hidden="true"></i> A checklist for your next website launch
    </header>
    <div class="p-3">
      <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Senior designers lead every project from the first sketch to the final file.</p>
      <p class="small mb-3">We combine strategy, design and technology to build brands that grow.</p>
      <p class="small mb-3">We measure success by how many clients come back and tell their friends.</p>
      <p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-3">Websites we build are fast, accessible and easy for your team to update.</p>
      <p class="small mb-3">Small teams, short feedback loops and no handoffs lost in translation.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
    </div>
  </div>
</div>

2Sticky save bar

sticky-bottom keeps form actions at the bottom edge of the scrolling area.

Every project starts with a workshop, so we understand your audience before we design.

Fixed prices and weekly demos keep you in control from start to finish.

From logo to launch campaign, everything is designed to work together.

Clients stay with us for years because we treat their brand like our own.

We measure success in sign-ups, sales and brand recall, not just awards.

Start in minutes and get help from a real person whenever you need it.

We test early with real users, so the final design works on the first day.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
    <div class="p-3">
      <p class="small mb-3">Every project starts with a workshop, so we understand your audience before we design.</p>
      <p class="small mb-3">Fixed prices and weekly demos keep you in control from start to finish.</p>
      <p class="small mb-3">From logo to launch campaign, everything is designed to work together.</p>
      <p class="small mb-3">Clients stay with us for years because we treat their brand like our own.</p>
      <p class="small mb-3">We measure success in sign-ups, sales and brand recall, not just awards.</p>
      <p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</p>
      <p class="small mb-3">We test early with real users, so the final design works on the first day.</p>
    </div>
    <div class="sticky-bottom bg-body-tertiary border-top p-2 d-flex justify-content-end gap-2">
      <button type="button" class="btn btn-sm btn-light">Discard</button>
      <button type="button" class="btn btn-sm btn-primary">Save changes</button>
    </div>
  </div>
</div>

3Sticky table header

Put sticky-top on the thead so the column names stay visible in a long table.

Name	Role	City
Maya Brennan	Finance Lead	Prague
Nadia Silva	Finance Lead	Edinburgh
Chloe Delgado	Customer Success	Montreal
Owen Varga	QA Engineer	Barcelona
Omar Larsen	Operations Manager	Kyoto
Mateo Kim	Frontend Engineer	Toronto
Ella Tanaka	Sales Executive	Toronto
Mason Carter	QA Engineer	Barcelona
Kai Sato	QA Engineer	Toronto
Noah Ortega	QA Engineer	Copenhagen
Isla Rossi	Art Director	Toronto
Mia Harlow	Product Designer	Porto

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Team table">
    <table class="table table-sm table-striped mb-0">
      <thead class="sticky-top">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Role</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Maya Brennan</td>
          <td>Finance Lead</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Nadia Silva</td>
          <td>Finance Lead</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Chloe Delgado</td>
          <td>Customer Success</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Owen Varga</td>
          <td>QA Engineer</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Omar Larsen</td>
          <td>Operations Manager</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Mateo Kim</td>
          <td>Frontend Engineer</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Ella Tanaka</td>
          <td>Sales Executive</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Mason Carter</td>
          <td>QA Engineer</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Kai Sato</td>
          <td>QA Engineer</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Noah Ortega</td>
          <td>QA Engineer</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Isla Rossi</td>
          <td>Art Director</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Mia Harlow</td>
          <td>Product Designer</td>
          <td>Porto</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

4Alphabet section headings

Each letter heading is sticky inside its own section, so the next letter pushes the previous one away.

A

Alvarez, Arjun
Ashford, Amara
Ashford, Zoe

C

Carter, Ava

D

Duarte, Ethan

H

Haddad, Aria
Haddad, Jonah

I

Ibrahim, Nora
Ibrahim, Ravi

L

Lindqvist, Sofia

M

Mensah, Tariq
Moreau, Felix
Moreau, Liam
Morgan, Leo

N

Nguyen, Diego
Nguyen, Finn
Novak, Ivy
Novak, Lea

O

Okafor, Chloe
Ortega, Ruby

P

Patel, Hana

Q

Quinn, Kenji

S

Silva, Freya

T

Tanaka, Theo

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">A</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Alvarez, Arjun</li>
        <li class="py-1">Ashford, Amara</li>
        <li class="py-1">Ashford, Zoe</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">C</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Carter, Ava</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Duarte, Ethan</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">H</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Haddad, Aria</li>
        <li class="py-1">Haddad, Jonah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">I</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Ibrahim, Nora</li>
        <li class="py-1">Ibrahim, Ravi</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">L</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Lindqvist, Sofia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">M</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Mensah, Tariq</li>
        <li class="py-1">Moreau, Felix</li>
        <li class="py-1">Moreau, Liam</li>
        <li class="py-1">Morgan, Leo</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">N</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Nguyen, Diego</li>
        <li class="py-1">Nguyen, Finn</li>
        <li class="py-1">Novak, Ivy</li>
        <li class="py-1">Novak, Lea</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">O</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Okafor, Chloe</li>
        <li class="py-1">Ortega, Ruby</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">P</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Patel, Hana</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">Q</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Quinn, Kenji</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">S</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Silva, Freya</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">T</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Tanaka, Theo</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

A column with a sticky-top block stays in view next to a long content column.