Tailwind CSS Sticky

Sticky is a component which allows elements to be locked in a particular area of the page. It is often used in navigation menus.

Basic example

To start use sticky just add a data-te-sticky-init attribute to the element you want to pin.

Download TE

HTML
javascript

        
            
      <div class="min-h-[500px] text-center">
        <a
          type="button"
          href="/docs/standard/getting-started/quick-start/"
          target="_blank"
          class="rounded border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-primary-600 focus:border-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
          data-te-ripple-init
          data-te-sticky-init>
          Download TE
        </a>
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Sticky bottom

You can pin element to bottom by adding data-te-sticky-position="bottom".

HTML
javascript

        
            
      <div class="min-h-[500px]">
        <img
          id="TE-logo-1"
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
          alt="TE Logo"
          data-te-sticky-init
          data-te-sticky-position="bottom" />
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Boundary

Set data-te-sticky-boundary="true" so that sticky only works inside the parent element. Remember to set the correct parent height.

HTML
javascript

        
            
      <div class="min-h-[500px]">
        <img
          id="TE-logo-2"
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
          alt="TE Logo"
          data-te-sticky-init
          data-te-sticky-boundary="true" />
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Outer element as a boundary

You can specify an element selector to be the sticky boundary.

Stop here

HTML
javascript

        
            
      <div
        class="flex min-h-[500px] w-full flex-col justify-center text-center">
        <div class="flex justify-center">
          <img
            id="TE-logo-3"
            src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
            alt="TE Logo"
            data-te-sticky-init
            data-te-sticky-boundary="#sticky-top"
            data-te-sticky-direction="both" />
        </div>
        <div id="sticky-top" class="mt-auto h-[5rem]">Stop here</div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Direction

Default direction of sticky component is down. You can change it by setting data-te-sticky-direction="up" or data-te-sticky-direction="down".

HTML
javascript

        
            
      <div class="min-h-[500px] text-center">
        <button
          type="button"
          data-te-ripple-init
          data-te-ripple-color="light"
          data-te-sticky-init
          data-te-sticky-boundary="true"
          data-te-sticky-direction="up"
          class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
          Up
        </button>
        <button
          type="button"
          data-te-ripple-init
          data-te-ripple-color="light"
          data-te-sticky-init
          data-te-sticky-boundary="true"
          data-te-sticky-direction="down"
          class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
          Down
        </button>
        <button
          type="button"
          data-te-ripple-init
          data-te-ripple-color="light"
          data-te-sticky-init
          data-te-sticky-boundary="true"
          data-te-sticky-direction="both"
          class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
          Both
        </button>
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Animation

You can add an animation that will run when the sticky starts and when the sticky element is hidden. just specify the css class of the animation using the data-te-sticky-animation-sticky and data-te-sticky-animation-unsticky attributes.

HTML
javascript

        
            
      <div class="min-h-[500px]">
        <img
          id="TE-logo-4"
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
          alt="TE Logo"
          data-te-sticky-init
          data-te-sticky-animation-sticky="animate-[slide-in-down_0.2s_ease-in-out]"
          data-te-sticky-animation-unsticky="animate-[slide-up_0.2s_ease-in-out]"
          data-te-sticky-boundary="true"
          data-te-sticky-z-index="49" />
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

By default, sticky locks the element at the edge of the screen. If you have a navbar element on your website, it will hide behind it. You can prevent this by setting an offset and delay. You can also change z-index of the sticky element by setting data-te-sticky-z-index attribute.

HTML
javascript

        
            
      <div class="min-h-[500px] w-full text-center">
        <nav
          class="sticky top-0 z-auto mb-3 flex w-full flex-wrap items-center justify-between bg-[#FBFBFB] py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 lg:py-4">
          <div class="flex w-full flex-wrap items-center justify-between px-3">
            <div class="ml-2">
              <a class="text-xl text-neutral-800 dark:text-neutral-200" href="#"
                >Navbar</a
              >
            </div>
          </div>
        </nav>
        <img
          id="TE-logo-5"
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
          alt="TE Logo"
          data-te-sticky-init
          data-te-sticky-boundary="true"
          data-te-sticky-direction="both"
          data-te-sticky-offset="75"
          data-te-sticky-delay="75"
          data-te-sticky-z-index="auto"
          class="mx-auto" />
      </div>

        
            
      // Initialization for ES Users
      import {
        Sticky,
        initTE,
      } from "tw-elements";
      
      initTE({ Sticky });

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Sticky, initTE } from "tw-elements";
        initTE({ Sticky });

        
            
        import "tw-elements";

Usage

Via data attributes

Simply add data-te-sticky-init attribute to the element to initialize the Sticky component. For ES format, you must first import and call the initTE method.

HTML

        
            
        <img
          id="TE-logo"
          src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp"
          alt="TE Logo"
          data-te-sticky-init />

Via JavaScript

javascript
umd

ES UMD

        
            
        const mySticky = new Sticky(document.getElementById('example'), options, classes);

        
            
        const mySticky = new te.Sticky(document.getElementById('example'), options, classes);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-sticky-direction="down".

Name	Type	Default	Description
`stickyAnimationSticky`	String	`-`	Set sticky animation. You have to pass the valid animation class like `animate-[fade-in_1s_ease-in-out]`
`stickyAnimationUnsticky`	String	`-`	Set unsticky animation You have to pass the valid animation class like `animate-[fade-out_1s_ease-in-out]`
`stickyBoundary`	Boolean	`false`	Set to `true` to stop sticky on the end of the parent.
`stickyDelay`	Number	`0`	Set the number of pixels beyond which the item will be pinned.
`stickyDirection`	String	`"down"`	Set the scrolling direction for which the element is to be sticky.
`stickyMedia`	Number	`0`	Set the minimum width in pixels for which the sticky should work.
`stickyOffset`	Number	`0`	Set the distance from the top edge of the element for which the element is sticky.
`stickyPosition`	String	`'top'`	Set the edge of the screen the item should stick to.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class, as in data-te-class-sticky-active="".

Name	Default	Description
`stickyActive`	-	Set the class to be added when the sticky element is active.

Methods

Method	Description	Example
`active`	Start sticky manually.	`mySticky.active()`
`inactive`	Stop sticky manually.	`mySticky.active()`
`dispose`	Manually deletes an instance of sticky.	`mySticky.dispose()`
`getInstance`	Static method which allows you to get the Sticky instance associated to a DOM element.	`Sticky.getInstance(mySticky)`
`getOrCreateInstance`	Static method which returns the Sticky instance associated to a DOM element or create a new one in case it wasn't initialized.	`Sticky.getOrCreateInstance(mySticky)`

javascript
umd

ES UMD

        
            
        const myStickyEl = document.getElementById('sticky')
        const sticky = new Sticky(myStickyEl)
        sticky.inactive();

        
            
        const myStickyEl = document.getElementById('sticky')
        const sticky = new te.Sticky(myStickyEl)
        sticky.inactive();

Events

Event type	Description
`active.te.sticky`	This event fires immediately when sticky start.
`inactive.te.sticky`	This event fires immediately when sticky stop.

JavaScript

        
            
        const myStickyEl = document.getElementById('sticky')
        myStickyEl.addEventListener('active.te.sticky', (e) => {
            // do something...
        })

Tailwind Sticky method

Basic example

Sticky bottom

Boundary

Outer element as a boundary

Direction

Animation

Sticky with navbar

Tailwind Sticky method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Tailwind Sticky method

Tailwind CSS Sticky

Basic example

Sticky bottom

Boundary

Outer element as a boundary

Direction

Animation

Sticky with navbar

Related resources

Tailwind Sticky method - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events