Headroom.js
Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
Installation
Headroom.js is available on npm. To install:
npm install headroom.js --save # or... yarn add headroom.js
A a universal build (suitable for script tags, CommonJS, and AMD) is available from unpkg.com:
Documentation
For complete documentation please visit the headroom.js website.
Quick start
After installing headroom.js
. The following JS will create and initialise a headroom instance:
; // select your header or whatever element you wishconst header = document; const headroom = header;headroom;
Then you can add the following CSS to your page:
You should now see your header slide in and out in response to the user's scroll.
Contributions & Issues
Contributions are welcome. Please clearly explain the purpose of the PR and follow the current code style.
Issues can be resolved quickest if they are descriptive and include both a reduced test case and a set of steps to reproduce.
Contributing Guide
Setup
The following steps will get you setup to contribute changes to this repo:
- Fork the repo (click the Fork button at the top right of this page)
- Clone your fork locally
git clone https://github.com/<your_github_username>/headroom.js.gitcd headroom.js
- Install dependencies. This repo uses
npm
, so you should too.
npm install
Building
To build the project:
npm run build
To start a watcher for building the project and running tests:
npm start
Testing
To run the test suite in headless mode:
npm test
License
Licensed under the MIT License.