@shahmeernasir/simple-react-sticky-header NPM

Simple React Sticky Header

A lightweight, customizable sticky header component for React projects.

🔗 Demo

Check out the live demo here: View Demo

Simple React Sticky Header

Installation

Install the package via npm:

npm install @shahmeernasir/simple-react-sticky-header

Requires react and react-dom as peer dependencies.

Features

⚡ Lightweight: Minimal footprint and easy to integrate.
🎯 Customizable: Control scroll behavior via props and CSS.
🧩 No Runtime Dependencies (other than React).
✅ TypeScript Support: Fully typed props and return types.
🛠️ Modern Tooling: Built with Vite and TypeScript.

Usage

import React from 'react';
import StickyHeader from '@shahmeernasir/simple-react-sticky-header';
import './App.css'; // Your global styles

function App() {
  return (
    <>
      <StickyHeader
        className="my-header"
        style={{ backgroundColor: '#fff' }}
        onHeaderHeightChange={(height) => console.log('Header height:', height)}
        addScrollClassesOnBody={true}
        addScrollClassesOnHeader={true}
      >
        <nav>
          <h1>My Website</h1>
        </nav>
      </StickyHeader>

      <main>
        <p>Page content...</p>
      </main>
    </>
  );
}

export default App;

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Header content (e.g., `<nav>`, `<div>`).
`className`	`string`	`""`	Additional class names.
`style`	`React.CSSProperties`	—	Inline style object.
`onHeaderHeightChange`	`(height: number) => void`	—	Callback with header height.
`addScrollClassesOnBody`	`boolean`	`true`	Add scroll classes to `<body>`.
`addScrollClassesOnHeader`	`boolean`	`true`	Add scroll classes to header element.

Styling

You can use global CSS:

.simple-react-sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.scrolling-up {
  transform: translateY(0%);
}

.scrolling-down {
  transform: translateY(-100%);
}

You can control whether the scroll classes are applied to body, header, or both via props.

Examples

Hide on Scroll Down, Show on Scroll Up

.simple-react-sticky-header.scrolling-down {
  transform: translateY(-100%);
}

.simple-react-sticky-header.scrolling-up {
  transform: translateY(0%);
}