Toggles header visibility on scroll. Try interactive CodeSandbox demo.
npm install hiding-header-reactimport { HidingHeader } from 'hiding-header-react'
import 'hiding-header/dist/style.css'
const Header = () => {
return (
<HidingHeader>
<header
style={{ backgroundColor: 'black', color: 'white', padding: '1em' }}
>
Put your content here
</header>
</HidingHeader>
)
}Import hiding-header/dist/style.css to your CSS. It's few lines of code. You can alternatively copy paste it and adjust things like z-index to your needs.
<HidingHeader> accepts several optional props.
| property name | default | description |
|---|---|---|
className |
'hidingHeader' |
Wrapper class attribute. |
innerClassName |
'hidingHeader-in' |
Offspring class name. |
component |
div |
Wrapper tag name. |
heightPropertyName |
'--hidingHeader-height' |
CSS property name. |
boundsHeightPropertyName |
'--hidingHeader-bounds-height' |
CSS property name. |
animationOffsetPropertyName |
'--hidingHeader-animation-offset' |
CSS property name. |
snap |
true |
Prevents only half of the header being visible when user stops scrolling. |
onHeightChange |
noop | Callback. |
onVisibleHeightChange |
noop | Callback. |
onHomeChange |
noop | Callback which calls back when header enters or leaves initial position. |
Changes header background to opaque when sticking / not home.
const MyApp = () => {
const [isHome, setIsHome] = useState(true)
return (
<HidingHeader
onHomeChange={(isHomeNew) => {
setIsHome(isHomeNew)
}}
>
<div style={{ backgroundColor: isHome ? 'transparent' : 'white' }}>
Menu
</div>
</HidingHeader>
)
}For runtime manipulation you can use hooks.
| hook name | description |
|---|---|
useHidingHeader |
Returns object with multiple functions to obtain or manipulate header state. |
usePauseHidingHeader |
Returns function. When called won't react to scroll. |
useRunHidingHeader |
Returns function. When called will react to scroll again. |
useRevealHidingHeader |
Returns function. When called will force header to show. |
useHideHidingHeader |
Returns function. When called will force header to hide. |