Description
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.
headroom alternatives and similar libraries
Based on the "Scroll" category.
Alternatively, view headroom alternatives based on common mentions on social networks and blogs.
-
fullPage
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple -
skrollr
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. -
iscroll
iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. -
parallax
Parallax Engine that reacts to the orientation of a smart device -
ScrollMagic
The javascript library for magical scroll interactions. -
onepage-scroll
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin -
vue-virtual-scroller
⚡️ Blazing fast scrolling for any amount of data -
locomotive-scroll
🛤 Detection of elements in viewport & smooth scrolling with parallax. -
Clusterize.js
Tiny vanilla JS plugin to display large data sets easily -
elevator.js
Finally, a "back to top" button that behaves like a real elevator. -
scrollMonitor
A simple and fast API to monitor elements as you scroll -
simpleParallax
Simple and tiny JavaScript library that adds parallax animations on any images -
angular-infinite-list
A short and powerful infinite scroll list library for angular, with zero dependencies -
Trig.js
The easy way to create CSS scroll animations that react to the position of your HTML element on screen. Animate on scroll (AOS) your CSS.
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of headroom or a related project?
README
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:
import Headroom from "headroom.js";
// select your header or whatever element you wish
const header = document.querySelector("header");
const headroom = new Headroom(header);
headroom.init();
Then you can add the following CSS to your page:
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}
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.git
cd 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.
*Note that all licence references and agreements mentioned in the headroom README section above
are relevant to that project's source code only.