Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/WickyNilliams/headroom.js
Give your pages some headroom. Hide your header until you need it
https://github.com/WickyNilliams/headroom.js
Last synced: 17 days ago
JSON representation
Give your pages some headroom. Hide your header until you need it
- Host: GitHub
- URL: https://github.com/WickyNilliams/headroom.js
- Owner: WickyNilliams
- License: mit
- Created: 2013-08-07T20:42:58.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T11:50:31.000Z (about 1 year ago)
- Last Synced: 2024-04-14T18:54:13.808Z (7 months ago)
- Language: JavaScript
- Homepage: https://wicky.nillia.ms/headroom.js/
- Size: 683 KB
- Stars: 10,859
- Watchers: 193
- Forks: 833
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - WickyNilliams/headroom.js - Give your pages some headroom. Hide your header until you need it (JavaScript)
- stars - WickyNilliams/headroom.js
- awesome - headroom.js - Give your pages some headroom. Hide your header until you need it (JavaScript)
- awesome-javascript - headroom.js - Give your pages some headroom. Hide your header until you need it - ★ 9970 (Scroll)
- awesome-frontend-libraries - headroom.js
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](http://wicky.nillia.ms/headroom.js) 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:
```bash
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:
[https://unpkg.com/headroom.js](https://unpkg.com/headroom.js)
## Documentation
For complete documentation please visit the [headroom.js website](http://wicky.nillia.ms/headroom.js).
## Quick start
After installing `headroom.js`. The following JS will create and initialise a headroom instance:
```js
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:
```css
.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:
1. Fork the repo (click the Fork button at the top right of [this page](https://github.com/WickyNilliams/headroom.js))
2. Clone your fork locally
```bash
git clone https://github.com//headroom.js.git
cd headroom.js
```
3. Install dependencies. This repo uses `npm`, so you should too.
```bash
npm install
```
### Building
To build the project:
```bash
npm run build
```
To start a watcher for building the project and running tests:
```bash
npm start
```
### Testing
To run the test suite in headless mode:
```bash
npm test
```
## License
Licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php).