Position sticky

Tailwind CSS Position sticky

Use responsive position sticky utilities with TW elements. Learn how to set an element to be visible until a certain point when scrolling.

Basic example

Use .sticky class to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.

Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

Abigail Davis

Alexander Lee

Amelia Collins

Andrew Carter

Benjamin Hughes

Bradley Wood

Brianna White

Brittany Campbell

Caleb Adams

Catherine James

Charlotte Gray

Corey Bailey

HTML

        
            
        <div>
          <div>
            <div class="... sticky top-0">A</div>
            <div>
              <div>
                <img src="..." />
                <p>Abigail Davis</p>
              </div>
              <!-- ... -->
              <div>
                <img src="..." />
                <p>Andrew Carter</p>
              </div>
            </div>
          </div>
          <div>
            <div class="sticky top-0">B</div>
            <div>
              <div>
                <img src="..." />
                <p>Benjamin Hughes</p>
              </div>
              <!-- ... -->
            </div>
          </div>
          <!-- ... -->
        </div>

Position sticky

Tailwind CSS Position sticky

Basic example

Access restricted

To view this section you must have an active PRO account

Position sticky

Tailwind CSS Position sticky

Basic example

Related resources