Similar to Headroom.js, Trailer hides your header as you scroll down and gradually reveals it as you scroll up, giving your users more screen space for the content they want, while keeping the navigation at hand.
Install the latest version of Trailer:
- Download a .zip of the latest version
- Clone the repo:
git clone https://github.com/unchained/trailer.js.git
- Install with npm:
npm install trailer.js
Make sure the target element is
position: fixed;
when applying Trailer to it. Works well for example with the Bootstrap 4 fixed navbar.
It is also recommended to apply
transform: translateZ(0);
to eliminate jumping of the element while scrolling on some browsers.
Then initialize in your Javascript file:
import Trailer from 'trailer.js'; // or `const Trailer = require('trailer.js').default;`
const trailer = new Trailer('.navbar', {/*...options*/});
Type: String
Selector for the header element
Type: Object
The options object can contain the following:
-
revealAtBottom: String — Should the navbar slide out at page bottom?, default
true
. -
bottomOffset: Number, Function or String — Offset from the bottom of the body where the header should be fully visible if
revealAtBottom=true
. Can be a number, function returning a number or element selector string. Passing a selector calculates the height of element automatically.
There are no required dependencies.
How to get a development environment running:
Install the latest version of gulp 4
npm install gulpjs/gulp-cli -g
npm install gulpjs/gulp#4.0 --save-dev
install any other npm dependencies
npm install
compile and start a watcher
gulp develop
- Javascript follows ESLint rules listed in the .eslintrc.json file.
- Feel free to fork the repo and make pull requests :)
We use SemVer for versioning.
- UNCHAINED.studio - Initial work - https://unchained.studio
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Thanks to Osvaldas Valutis for the article and it's code examples which were used as a base for this plugin.