preact-scroll-header

A (800b gzip) header that will show/hide while scrolling; for ⚛️ Preact

Demo (standard)

Demo (inverse)

Install

$ npm install --save preact-scroll-header

❗ Pro Tip: Use Yarn to install dependencies 3x faster than NPM!

<script src="https://unpkg.com/preact-scroll-header@1.0.0/dist/preact-scroll-header.min.js"></script>

Usage

Provide a value; everything else is optional.

import { h } from 'preact';
import ScrollHeader from 'preact-scroll-header';

<ScrollHeader
  id="header" className="menu"
  buffer={ 24 } showClass="menu-show"
  onShow={ el => console.log('SHOWN', el) }
  onHide={ el => console.log('HIDDEN', el) }>
  <h1>Menu</h1>
</ScrollHeader>

Styles

This component does not include any inline styles. Instead, classnames are assigned for every state the <ScrollHeader/> 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:

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

Note: Applying a transition before this class (via base style or fixClass) will cause the <ScrollHeader/> 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 <ScrollHeader/> is out of view and has been "fixed".

buffer

Type: Number
Default: 0

The number of pixels to scroll before applying your showClass. By default, the <ScrollHeader/> 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