Give your pages some headroom. Hide your header until you need it

Last update: Jan 4, 2023

Related tags

Overview

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:

https://unpkg.com/headroom.js

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.

Comments

Bower support - Release the latest changes

Hi, I see that there are a lot of fixes that would fix the problems I have with AngularJs. But because the source folder is not included on bower, I can't use them.

Can you please build the latest version?

opened by sebastiannm 27

Version that allows for browserify/require.js compatibility

Would like the ability to use browserify/require.js with headroom. This requires a couple extra lines:

(function(root, factory) {
  'use strict';
  if (typeof define == 'function' && define.amd) {
    /*
     * AMD. Register as an anonymous module.
     */
    define([], factory);
  } else if (typeof exports == 'object') {
    /*
     * Node and stuff
     */
    module.exports = factory();
  } else {
    /*
     * Browser globals (root is window)
     */
    root.Headroom = factory();
  }
}(this, function() {
  // All code goes here and then return Headroom.
}));

This would allow the use of it as a global (as it is now), in browserify and in requirejs

enhancement

opened by jeffshaver 18

CSS documentation hints
Thanks for creating this. It works great. But I had to work on it for quite a while before I figured out that I had to add the CSS. I initially interpreted the instructions for jQuery in a literal way:

// simple as this! // NOTE: init() is implicitly called with the plugin $("# header").headroom();

So, that's all I did. And indeed, it was quite simple. But although I could see the classes changing on scroll, nothing happened. So, eventually I figured out that -- at least, in my case -- I had to create and add the CSS for the classes:

.headroom { position: fixed; top: 0; left: 0; right: 0; transition: all .2s ease-in-out; } .headroom--unpinned {top: -100px;} .headroom--pinned {top: 0;}

I'm not sure if the method I used is correct, or if this is supposed to work by following the "simple as this!" guideline in the docs. But it did not work out of the box for me, and if the CSS is required, maybe that could also be shown in the documentation?
opened by rosslaird 18
Target scrolling within a div

Many mobile websites have Facebook-style slidein menus and the main content div slides over to make room for those menusIn that case, the window doesn't scroll, but the main content div has a height of 100% and the content scrolls within that relatively or absolutely positioned div. (see snap.js as an example).

Is there a way to target the scrolling within a main div, rather than the window itself?
enhancement

opened by danrichman 18
Bower does not work

Today running bower and i got an error. Until the day before i was working.

if you set bower to the path as in the repo readme ( https://unpkg.com/headroom.js/bower.zip ) you got a message error: Not found: file "/bower.zip" in package [email protected]

anyone has the same issue?

opened by valeriosillari 16
Fixes issue where feature-check for does not prevent .bind from being called

If function.bind is unavailable, headroom throws an exception trying to bind in the constructor.

Moved initialization of Debouncer to Headroom.init rather than the constructor.

opened by rajivm 15
ENOTFOUND Package headroom.js not found

When attempting to install via bower install headroom.js I get the follow error:

* ENOTFOUND Package headroom.js not found*

This has caused my CI deployments to fail. I was forced to fork your repo to be able to include in my project. Has anything been changed that would lead to this repo not being accessible via bower? (npm installs properly)

opened by paul-barry-kenzan 13
Not working at all

Some weird thing happen in this case, It seems there is not syntax errors, but some way the script doesn´t work "at all" http://codepen.io/sp3ncer/pen/twnFI

opened by ghost 13
Detect scroll to top
This PR takes care of #43

'headroom--top' class is added when browser is scrolled to top

'headroom--top' is removed when scrolling down

Callbacks onTop and onUntop can be registered

Detection of 'scroll to top' takes account of the offset option

Let me know if you prefer the dist files removed from the PR
opened by andyhot 13
Bower install is broken

Hey mate,

Just tried to install via bower, and you're not allowed to include minified files in the "main" property.

On top of that, those files don't even exist :)

Cheers

opened by baffleinc 12
AngularJS scroller="" in directive not working.

I have an absolutely positioned div with an overflow-y:auto on it. I'd like to add headroom to an element within this div. I can't get the scroller="#scrollingcontainer" to work, instead I get this error:

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

I have included headroom.js (0.7.0) via bower, and added the dependency:

angular .module('app', [ 'headroom',...

In my template I've included the directive:

...
I've tried these too: scroller="#scrollingcontainer" scroller=".scrollingcontainer" (for class) for the scrolling container also.

What am I doing wrong??? It looks pretty clear in the documentation that you need to enter a selector that the directive then uses to get a dom element...

Any help would be appreciated, thanks!

opened by digitaltopo 12
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.

Changelog

Sourced from qs's changelog.

6.5.3

[Fix] parse: ignore __proto__ keys (#428)

[Fix] utils.merge: avoid a crash with a null target and a truthy non-array source

[Fix] correctly parse nested arrays

[Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)

[Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided

[Fix] when parseArrays is false, properly handle keys ending in []

[Fix] fix for an impossible situation: when the formatter is called with a non-string value

[Fix] utils.merge: avoid a crash with a null target and an array source

[Refactor] utils: reduce observable [[Get]]s

[Refactor] use cached Array.isArray

[Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)

[Refactor] parse: only need to reassign the var once

[Robustness] stringify: avoid relying on a global undefined (#427)

[readme] remove travis badge; add github actions/codecov badges; update URLs

[Docs] Clean up license text so it’s properly detected as BSD-3-Clause

[Docs] Clarify the need for "arrayLimit" option

[meta] fix README.md (#399)

[meta] add FUNDING.yml

[actions] backport actions from main

[Tests] always use String(x) over x.toString()

[Tests] remove nonexistent tape option

[Dev Deps] backport from main

Commits

298bfa5 v6.5.3

ed0f5dc [Fix] parse: ignore __proto__ keys (#428)

691e739 [Robustness] stringify: avoid relying on a global undefined (#427)

1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs

12ac1c4 [meta] fix README.md (#399)

0338716 [actions] backport actions from main

5639c20 Clean up license text so it’s properly detected as BSD-3-Clause

51b8a0b add FUNDING.yml

45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...

f814a7f [Dev Deps] backport from main

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump terser from 4.2.0 to 4.8.1
Bumps terser from 4.2.0 to 4.8.1.

Changelog

Sourced from terser's changelog.

v4.8.1 (backport)

Security fix for RegExps that should not be evaluated (regexp DDOS)

v4.8.0

Support for numeric separators (million = 1_000_000) was added.

Assigning properties to a class is now assumed to be pure.

Fixed bug where yield wasn't considered a valid property key in generators.

v4.7.0

A bug was fixed where an arrow function would have the wrong size

arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.

Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

v4.6.13

Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.

Fixed parsing of BigInt with lowercase e in them.

v4.6.12

Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]

Printing of unicode identifiers has been improved

v4.6.11

Read unused classes' properties and method keys, to figure out if they use other variables.

Prevent inlining into block scopes when there are name collisions

Functions are no longer inlined into parameter defaults, because they live in their own special scope.

When inlining identity functions, take into account the fact they may be used to drop this in function calls.

Nullish coalescing operator (x ?? y), plus basic optimization for it.

Template literals in binary expressions such as + have been further optimized

v4.6.10

Do not use reduce_vars when classes are present

v4.6.9

Check if block scopes actually exist in blocks

v4.6.8

Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

v4.6.7

Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

... (truncated)

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump ajv from 6.10.2 to 6.12.6
Bumps ajv from 6.10.2 to 6.12.6.

Release notes

Sourced from ajv's releases.

v6.12.6

Fix performance issue of "url" format.

v6.12.5

Fix uri scheme validation (@ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

v6.12.4

Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

v6.12.3

Pass schema object to processCode function Option for strictNumbers (@issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

v6.12.2

Removed post-install script

v6.12.1

Docs and dependency updates

v6.12.0

Improved hostname validation (@sambauers, #1143) Option keywords to add custom keywords (@franciscomorais, #1137) Types fixes (@boenrobot, @MattiAstedrone) Docs:

error logging example (@RadiationSickness)

TypeScript usage notes (@thetric)

v6.11.0

Time formats support two digit and colon-less variants of timezone offset (#1061 , @cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

Commits

fe59143 6.12.6

d580d3e Merge pull request #1298 from ajv-validator/fix-url

fd36389 fix: regular expression for "url" format

490e34c docs: link to v7-beta branch

9cd93a1 docs: note about v7 in readme

877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type

f1c8e45 6.12.5

764035e Merge branch 'ChALkeR-chalker/fix-comma'

3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...

a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Second menu

Hi Is it possible to use two menus on a page: a main menu that will disappear and a second horizontal menu that will stop, but then the first one will push it down?

opened by Alex-Indilex 0
Headroom.js together with Locomotive Scroll

Hi, I am developing a project in which I use Headroom.js.

Now I have integrated Locomotive Scroll successfully but Headroom.js no longer works.

In Headroom.js there is an option called "scroller" where you enter an element to listen to scroll events on, defaults to "window", I have tried to enter "[data-scroll-container]" or "[data-scroll-section]" which are the containers that allow Locomotive to recreate the smooth scroll effect, but it doesn't work.

Is there anyone who has had a similar experience and can help me? Thank you in advance for a kind reply!

opened by JoBlast447 2

Releases(v0.11.0)

v0.11.0(Jan 17, 2020)
This release adds support for multiple classes. This can be of particular use when using atomic CSS classes.

To use, pass a string with a space-separated list of classes in your options:

const hr = new Headroom(element, { classes: { pinned: "first-class second-class", unpinned: "third-class fourth-class" } }); hr.init();
Source code(tar.gz)
Source code(zip)
v0.10.4(Jan 17, 2020)

This release fixes a bug where classes such as top were not added when Headroom is initialised, only after the user first scrolls.
Source code(tar.gz)
Source code(zip)
v0.10.3(Oct 9, 2019)
This release contains a breaking change for IE11, with the introduction of Object.assign.

Please be aware this needs to be polyfilled if you wish to support IE11. Alternatively, you can wrap your initialisation code in a condition to avoid instantiation on unsupported browsers:

if(Headroom.cutsTheMustard) { // initialise headroom }
Source code(tar.gz)
Source code(zip)