svelte-headroom

Hide your header until you need it!

Svelte Headroom is a Svelte component that hides or shows your header on scroll, inspired by headroom.js ↗. It has no dependencies and is designed for Svelte applications.

Key Features:

• Scroll-aware behavior: Automatically hides the header when scrolling down and shows it when scrolling up.
• Customizable props:
  • offset (number): Pixels from the top before the effect triggers (default: 0).
  • tolerance (number): Minimum scroll distance required for the effect (default: 0).
  • duration (string): Transition duration for the sliding effect (default: "300ms").
• Events: Emits pin and unpin events for tracking header state changes.

Demo:

Try it on Code Sandbox ↗.

Target Audience:

Svelte developers looking for a lightweight, scroll-aware header solution.

Happy Coding!