Alpinejs-sticky NPM

Alpine JS Sticky

Toggle CSS class names when an element becomes sticky to the DOM 🐙

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-sticky@latest/dist/sticky.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

With a Package Manager

npm i -D alpinejs-sticky

yarn add -D alpinejs-sticky

import Alpine from 'alpinejs'
import sticky from 'alpinejs-sticky'

Alpine.plugin(sticky)

Alpine.start()

Example

<div x-data>
  <div class="sticky top-0 sticky-root" x-sticky="!bg-red-500">
    <p class="hidden" x-sticky.sticky-root="!block">Hello World!</p>
  </div>

  <p class="hidden" x-sticky.sticky-root="!block">Hello World!</p>
</div>

x-sticky="!bg-red-500"

This will add !bg-red-500 to the element when it is sticky to the DOM.

x-sticky.sticky-root="!block"

This will add !block to the element when the sticky-root element is sticky to the DOM.

At times you might need to apply the ! important modifier to your CSS.

This example uses Tailwind CSS classes, but any CSS class names will work.

Modifiers

As shown you can pass a class name as a modifier to target a specific HTML element.

You can also pass wait which will use the scroll event listener instead of the IntersectionObserver. Why would you want this? Well, it comes in handy when the element is already at the top of the DOM and you don't want the stuck classes applying.