Peek

A lightweight JavaScript library for smart header behavior. Hide on scroll down, reveal on scroll up.

↓ Scroll to see it in action

Features

Everything you need for a smart, responsive header

🪶

Lightweight

Minimal footprint with zero dependencies. Just pure JavaScript.

🎯

Smart Detection

Distinguishes intentional scrolling from small movements with tolerance settings.

⚡

High Performance

Uses requestAnimationFrame and passive listeners for smooth scrolling.

🎨

Customizable

Configure offsets, tolerance, and CSS classes to match your design.

See It In Action

The header you see at the top of this page is powered by Peek. Try scrolling up and down to see how it behaves:

Scroll Down: The header smoothly hides to give you more screen space
Scroll Up: The header instantly appears, ready when you need it
At Top: The header stays visible when you're at the top of the page

Watch the status indicator in the bottom-right corner to see the header states change in real-time!

Easy to Use

Get started with just a few lines of code:

1. Add the HTML

<header class="header-main">
  Your content here
</header>
        

2. Style with CSS

/* Basic header styles */
.header-main {
  position: fixed;
  top: 0;
  transition: transform 0.3s ease;
}

/* Peek states */
.main-header--unpinned {
  transform: translateY(-100%);
}
        

3. Initialize with JavaScript

// That's it! 🎉
const peek = Peek('.header-main');
        

Why Use Peek?

Modern web design is all about maximizing screen real estate while maintaining usability. Peek helps you achieve this balance by intelligently managing your header visibility based on user scroll behavior.

Unlike static fixed headers that permanently consume valuable vertical space, Peek gives users more room when they're focused on content, while ensuring navigation is always just a scroll away.

Perfect For

📱 Mobile Sites

Maximize limited screen space on mobile devices

📰 Content Sites

Let readers focus on articles without distractions

🛍️ E-commerce

Show more products while keeping navigation accessible

💼 Landing Pages

Create immersive experiences with smart navigation

Get Started

Peek is open source and available on GitHub. Download it, contribute, or report issues.

→ Visit GitHub Repository