Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukeed/preact-scroll-header
A (800b gzip) header that will show/hide while scrolling for Preact
https://github.com/lukeed/preact-scroll-header
Last synced: 2 months ago
JSON representation
A (800b gzip) header that will show/hide while scrolling for Preact
- Host: GitHub
- URL: https://github.com/lukeed/preact-scroll-header
- Owner: lukeed
- License: mit
- Created: 2017-02-24T19:50:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-25T17:27:04.000Z (about 6 years ago)
- Last Synced: 2024-10-06T06:43:33.370Z (3 months ago)
- Language: JavaScript
- Homepage: https://jsfiddle.net/lukeed/cyfjsk50/
- Size: 15.6 KB
- Stars: 41
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-preact - Preact Scroll Header - A (800b gzip) header that will show/hide while scrolling for Preact. (Uncategorized / Uncategorized)
README
# preact-scroll-header [](https://www.npmjs.com/package/preact-scroll-header)
> A (800b gzip) header that will show/hide while scrolling; for :atom_symbol: [Preact](https://github.com/developit/preact)
#### [Demo (standard)](https://jsfiddle.net/lukeed/cyfjsk50/)
#### [Demo (inverse)](https://jsfiddle.net/lukeed/mxrse9k4/)
## Install
```
$ npm install --save preact-scroll-header
```
> :exclamation: **Pro Tip:** Use [Yarn](https://yarnpkg.com/) to install dependencies 3x faster than NPM!
```html
```
## Usage
Provide a `value`; everything else is optional.
```js
import { h } from 'preact';
import ScrollHeader from 'preact-scroll-header';
console.log('SHOWN', el) }
onHide={ el => console.log('HIDDEN', el) }>
Menu
```
## Styles
This component does not include any inline styles. Instead, classnames are assigned for every state the `` enters. This provides greater flexibility and control of your desired effects!
However, there are some strong guidelines which you should not neglect. Below is an example for a simple slide-down effect:
```css
/* start with "shown" position */
/* will-change, top, right, left early to avoid extra repaints */
.header {
position: relative;
will-change: transform;
transform: translateY(0%);
right: 0;
left: 0;
top: 0;
}
/* apply fixed; set start point */
.is--fixed {
position: fixed;
transform: translateY(-100%);
}
/* apply transition separately; no flicker */
.is--ready {
transition: transform 0.2s ease-in-out;
}
/* set end point; with shadow */
.is--shown {
transform: translateY(0%);
box-shadow: 0 3px 6px rgba(0,0,0, 0.16);
}
```
> **Note:** Assumes that "header" was added as your base `className`. All others are defaults.
## Properties
#### id
Type: `String`
Default: `none`
The `id` attribute to pass down.
#### className
Type: `String`
Default: `none`
The `className` attribute to pass down. Added to the wrapper element.
#### fixClass
Type: `String`
Default: `'is--fixed'`
The `className` to add when the header is out of view. This should apply a `position:fixed` style, as well as an initial `transform` value.
#### readyClass
Type: `String`
Default: `'is--ready'`
The `className` to add when the header has been "fixed". This should apply a `transition` value to your header, which should always be separated from your [`fixClass`](#fixClass).
> **Note:** Applying a `transition` _before_ this class (via base style or `fixClass`) will cause the `` to flicker into view before hiding.
#### showClass
Type: `String`
Default: `'is--shown'`
The `className` to add when the header should be revealed. This should apply your desired `transform` effect. Class is only applied when the `` is out of view and has been "fixed".
#### buffer
Type: `Number`
Default: `0`
The number of pixels to scroll before applying your [`showClass`](#showClass). By default, the `` will be shown immediately after user scrolls up.
#### listenTo
Type: `String`
Default: `this.base.parentNode`
The "scroller" element that will fire `scroll` events. Works well with customized viewports, where `document.body` is not scrollable and/or controlling overflow.
#### disabled
Type: `Boolean`
Default: `false`
Whether or not to disable the show/hide behavior. If `true`, **will not** add `fixClass`, `readyClass`, or `showClass`.
#### onShow
Type: `Function`
The callback function when the header is to be shown. Receivies the DOM element as its only argument, but is bound to the `ScrollHeader` component context.
#### onHide
Type: `Function`
The callback function when the header is to be hidden. Receivies the DOM element as its only argument, but is bound to the `ScrollHeader` component context.
## License
MIT © [Luke Edwards](https://lukeed.com)