https://github.com/filipchalupa/hiding-header

Javascript package for hiding headers on scroll.
https://github.com/filipchalupa/hiding-header

javascript npm sticky-header typescript

Last synced: 2 months ago
JSON representation

Javascript package for hiding headers on scroll.

• Host: GitHub
• URL: https://github.com/filipchalupa/hiding-header
• Owner: FilipChalupa
• License: isc
• Created: 2020-02-09T13:46:11.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-16T18:21:06.000Z (7 months ago)
• Last Synced: 2024-11-06T05:04:54.599Z (2 months ago)
• Topics: javascript, npm, sticky-header, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/hiding-header
• Size: 1.28 MB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Hiding Header [![npm](https://img.shields.io/npm/v/hiding-header.svg)](https://www.npmjs.com/package/hiding-header) ![npm type definitions](https://img.shields.io/npm/types/hiding-header.svg)

Toggles header visibility on scroll. [Demo](https://filipchalupa.cz/hiding-header/demo).

![UI example](https://raw.githubusercontent.com/FilipChalupa/hiding-header/HEAD/screencast.gif)

## Installation

```bash

npm install hiding-header

```

## How to use

### HTML:

```html

	


		


			

		

	

	


```

### CSS:

Import [dist/style.css](src/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:

```javascript

import { hidingHeader } from 'hiding-header'

const container = document.querySelector('#hidingHeader')

hidingHeader(container)

```

### More

```javascript

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](https://www.npmjs.com/package/hiding-header-react).

### SolidJS component

For more information see [@sect/solid-hiding-header](https://www.npmjs.com/package/@sect/solid-hiding-header).

### Web component

For more information see [hiding-header-webcomponent](https://www.npmjs.com/package/hiding-header-webcomponent).