hiding-header

Toggles header visibility on scroll.

0.9.1
latest
Source
npm

Version published: 2 months ago

Weekly downloads: 70; decreased by-19.54%

Maintainers: 0

Weekly downloads

Created: 5 years ago

Source

Hiding Header

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)

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.

Keywords

FAQs

What is hiding-header?

Is hiding-header popular?

Is hiding-header well maintained?

Package last updated on 10 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install