Skip to content

Latest commit

 

History

History
83 lines (58 loc) · 2.49 KB

README.md

File metadata and controls

83 lines (58 loc) · 2.49 KB
Raw

Hiding Header npm npm type definitions

Toggles header visibility on scroll. Demo.

UI example

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.