hiding-header

Toggles header visibility on scroll.

0.8.0
Source
npm

Version published: 3 years ago

Weekly downloads: 56; decreased by-39.78%

Maintainers: 1

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) => void, // When content height changes
		onVisibleHeightChange = (height: number) => void, // When part of header is revealed
		onHomeChange: (isHome: boolean) => void, // When returns to home
})

// …
instance.pause() // Pauses recalculations of sticky boundaries on scroll
instance.isPaused() // Check if paused
instance.run() // Reactivates
// …

// …
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.

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 09 Aug 2021

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