0.9.1 • Published 7 months ago
hiding-header v0.9.1
Hiding Header

Toggles header visibility on scroll. Demo.
Installation
npm install hiding-header
How to use
HTML:
<!-- … -->
<body>
<div class="hidingHeader" id="hidingHeader">
<div class="hidingHeader-in">
<!-- Your header -->
</div>
</div>
<!-- … -->
</body>
<!-- … -->
CSS:
Import 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.
JavaScript:
import { hidingHeader } from 'hiding-header'
const container = document.querySelector('#hidingHeader')
hidingHeader(container)
More
import { hidingHeader } from 'hiding-header'
const container = document.querySelector('#hidingHeader')
const instance = hidingHeader(container, {
heightPropertyName: '--hidingHeader-height',
boundsHeightPropertyName: '--hidingHeader-bounds-height',
animationOffsetPropertyName: '--hidingHeader-animation-offset',
snap: true, // Reveal or hide header if user stops scrolling in middle
onHeightChange: (height: number) => {}, // When content height changes
onVisibleHeightChange: (height: number) => {}, // When part of header is revealed
onHomeChange: (isHome: boolean) => {}, // When returns to home
})
instance.pause() // Pauses recalculations of sticky boundaries on scroll
instance.isPaused() // Check if paused
instance.run() // Reactivates
instance.destroy() // Removes all internal event listeners
instance.reveal() // Reveals header if hidden
instance.hide() // Hides header if visible
instance.getHeight() // Returns content height in pixels
instance.getVisibleHeight() // Returns height of visible content area in pixels
instance.isHome() // Returns true if element is at initial position, e.g. user has not yet scrolled
React component
For more information see hiding-header-react.
SolidJS component
For more information see @sect/solid-hiding-header.
Web component
For more information see hiding-header-webcomponent.
0.9.1
7 months ago
0.9.0
2 years ago
0.8.4
2 years ago
0.8.3
4 years ago
0.8.1
4 years ago
0.7.2
4 years ago
0.8.0
4 years ago
0.8.2
4 years ago
0.7.1
4 years ago
0.5.0
4 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.3.4
4 years ago
0.3.3
4 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.0
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago
0.0.0
5 years ago