0.9.1 • Published 10 months ago

hiding-header v0.9.1

Weekly downloads
199
License
ISC
Repository
github
Last release
10 months ago

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.

0.9.1

10 months ago

0.9.0

2 years ago

0.8.4

3 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

5 years ago

0.5.0

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago

0.3.4

5 years ago

0.3.3

5 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

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago

0.0.0

6 years ago