Next generation web header UX
Switch branches/tags
Nothing to show
Clone or download
Latest commit eb26625 May 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Add isSupported() method. Link to demo Jan 27, 2016
src Add isSupported() method. Link to demo Jan 27, 2016
test Add isSupported() method. Link to demo Jan 27, 2016
.eslintrc initial commit Jan 27, 2016
.gitignore initial commit Jan 27, 2016
.travis.yml 2018 meta spruce up May 25, 2018
LICENSE 2018 meta spruce up May 25, 2018
README.md 2018 meta spruce up May 25, 2018
demo.html Add isSupported() method. Link to demo Jan 27, 2016
package.json 2018 meta spruce up May 25, 2018
rollup.config.js initial commit Jan 27, 2016

README.md

headspace.js Build Status

Next generation web header UX. This is similar to headroom.js, but different in areas I believe could be improved:

  • Header initially scrolls naturally out of view as if it is static
  • Header reappears fixed when scrolling up, hides when scrolling back down (if greater that scroll tolerance)
  • Header can reappear when reaching bottom of the document
  • Header can reappear if hovering near the top
  • Interaction/tolerance should match closely to mobile safari's chrome
  • Minimal footprint, more opinionated

Sites like medium.com, teehan + lax deploy a similar technique

Demo

demo.html

Install

npm install headspace --save

Usage

// Basic example:
const headspace = Headspace(document.querySelector('header'))

// Advanced example with options:
Headspace(document.querySelector('header'), { // can use factory method or `new Headspace`
  startOffset: 90,                            // default: height of element
  tolerance: 5,                               // default: 8
  showAtBottom: false,                        // default: true
  classNames: {
    base: 'custom',                           // default: 'headspace'
    fixed: 'custom--fixed',                   // default: 'headspace--fixed'
    hidden: 'custom--hidden'                  // default: 'headspace--hidden'
  }
})

Base css: To get started quickly with the minimal amount of css, copy contents of dist/headspace.css to your project.

Browser support

Out of the box: Chrome 24+, Firefox 23+, Safari 7+, IE 10+
AKA browsers that natively support classList and requestAnimationFrame

You can globally pollyfill them if needed, otherwise the code is structured so you can manually shim-in support.
Headroom.isSupported() will check if it can be used out of the box on the current browser/environment

Build

npm run build

Test

npm test