Sticky

Tailwind CSS Sticky

Use responsive sticky utilities with TW elements. A tutorial on how to easily stick an element to the edge.

Basic example

Use .sticky class with top-0 or bottom-0 class to specify the direction of the sticky positioning.

sticky top

Scroll down

Scroll up

sticky bottom

HTML

        
            
        <div class="... sticky top-0">
          <p>sticky top</p>
        </div>
        <div>...</div>
        <div class="... sticky bottom-0">
          <p>sticky bottom</p>
        </div>

You can also do this with the .left-0 and .right-0 classes.

sticky
left

slide right

slide left

sticky
right

HTML

        
            
        <div class="... sticky left-0">
          <p>sticky left</p>
        </div>
        <div>...</div>
        <div class="... sticky right-0">
          <p>sticky right</p>
        </div>

Sticky

Tailwind CSS Sticky

Basic example

Related resources