affixing-header

Affixing Header 

Create an affixing header that behaves normally as a user navigates down a page, but reveals itself naturally when a user scrolls or drags upwards. Inspired by iOS Safari, Medium, and others. See an example implementation. Works on desktop and mobile browsers.

Usage

The object exports an affixing-header module if being used with a CommonJS or AMD module loader, or else exposes a global object as window.affixingHeader.

affixingHeader( element )

element Element

The DOM element to which the affixing behaviour should be attached. Must be a single Element (e.g., the result of document.querySelector or document.getElementById), not a NodeList.

Dependencies

This package uses jank-free onscroll, a requestAnimationFrame-based, performant, mobile-friendly scroll event handler, to listen for page scrolls, but has no other dependencies.

Compatibility

The scroll handling uses requestAnimationFrame, which is only available in IE10+. For older browsers, your header simply won?t affix when you scroll up, but you shouldn?t see any other issues (yay progressive enhancement!). To add compatibility for older browsers, just include a requestAnimationFrame polyfill.