TypeScript
Type-Safe Development
Written in TypeScript with full type definitions, ensuring better development experience and fewer runtime errors.
Welcome
Intelligent Navigation that Responds to User Behavior
ScrollReactiveNav is a lightweight TypeScript utility that creates smart, responsive navigation behavior. It automatically hides the navigation when users scroll down and shows it when they scroll up, providing an enhanced user experience for modern web applications.
Get Started
Features
Built for Performance and Flexibility
Performance
Optimized Scrolling
Uses RequestAnimationFrame for smooth animations and passive event listeners for optimal performance.
Configurable
Flexible Options
Customize tolerance levels, start offsets, CSS class names, and bottom visibility behavior to match your design.
Lightweight
Zero Dependencies
Pure TypeScript implementation with no external dependencies. Small bundle size for fast loading.
API Reference
Configuration Options
ScrollReactiveNavOptions
startOffset?: number
Pixel offset to start fixing
navigation (default: element.offsetHeight)
tolerance?: number
Minimum scroll distance for changes
(default: 8)
showAtBottom?: boolean
Show navigation at page bottom
(default: true)
classNames?: object
Custom CSS class names for
different states
Public Methods
init(): void
Initialize scroll monitoring
destroy(): void
Remove scroll monitoring and
cleanup
reset(): void
Reset navigation to default state
fix(): void
Fix navigation in visible state
hide(): void
Hide navigation
Usage
Quick Implementation Guide
NPM Installation
npm install scroll-reactive-nav@betaBasic Setup
import { ScrollReactiveNav } from 'scroll-reactive-nav';
// get your navigation element
const header = document.getElementById('header');
// initialize with default options
const nav = new ScrollReactiveNav(header);
// or with custom options
const nav = new ScrollReactiveNav(header, {
tolerance: 15,
showAtBottom: false,
classNames: {
base: 'my-nav',
hidden: 'my-nav--hidden'
}
});Required CSS Classes
.scroll-nav {
transition: transform 0.3s ease;
}
.scroll-nav--hidden {
transform: translateY(-100%);
}
.scroll-nav--fixed {
/* Additional styles for fixed state */
background: rgba(0, 0, 0, 0.9);
}
Contact
Get in Touch
Questions about implementation? Need custom features? Feel free to reach out for support or collaboration on your next project with ScrollReactiveNav.
License: MPL-2.0 - Free for personal and commercial use