https://github.com/bsodium/material-sticky-header
https://github.com/bsodium/material-sticky-header
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bsodium/material-sticky-header
- Owner: BSoDium
- Created: 2025-06-14T16:55:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-06-15T10:40:57.000Z (4 months ago)
- Last Synced: 2025-06-15T11:37:03.849Z (4 months ago)
- Language: TypeScript
- Homepage: https://material-sticky-header.vercel.app
- Size: 814 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Material Sticky Header
A proof of concept implementation of Android's scroll-snap settings header behavior in React TypeScript. This project demonstrates a material sticky header that smoothly transitions between states based on scroll position, mimicking the native Android settings interface.
https://github.com/user-attachments/assets/d5ca5085-7d54-4476-b406-ba5112562082
## Features
- **Scroll-responsive header**: Header adapts to scroll position with smooth transitions
- **Android-inspired design**: Replicates the scroll behavior found in Android's settings app
- **TypeScript**: Fully typed React components for better development experience
- **Storybook integration**: Interactive component documentation and testing
- **Height observation**: Custom hook for monitoring element height changes
## Getting Started
1. **Install dependencies**:
```bash
yarn
```
2. **View Storybook** (for component documentation):
```bash
yarn storybook
```
## Implementation Details
The sticky header implementation uses:
- Scroll event listeners to detect scroll position
- CSS transforms with [**motion**](https://motion.dev/) for smooth animations
- Height observation to handle dynamic content
- State management for header visibility transitions
This POC demonstrates how to create fluid, native-feeling scroll interactions in web applications using modern React patterns and TypeScript.