<header id="header" class="header header--fixed hide-from-print" role="banner">
    <div class="container" >
        <nav id="nav" class="nav-wrapper" role="navigation">
            <ul class="nav nav--main">
                <li class="nav__item ">
                    <a class="header__link subdued" href="#">
                        <span aria-hidden="true" class="icon icon--github"></span>
                        <span class="complimentary push--left">GitHub</span>
                <li class="nav__item ">
                    <a class="header__link subdued" href="https://twitter.com/tuluzzcom">
                        <span aria-hidden="true" class="icon icon--twitter"></span>
                        <span class="complimentary push--left">@Tuluzzcom</span>
        <a href="#">
            <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b>

<header class="feature">
    <div class="container container--wide feature-title">
        <h1 class="feature-title__title headroom-title">Headroom.js</h1>
        <p class="feature-title__subtitle">Give your pages some headroom. Hide your header until you need it.</p>

<div class="container block main" role="main">

<h2>What's it all about?</h2>

<p>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.</p>

<h3>Why use it?</h3>

<p>Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems&hellip; </p>

<p>Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.</p>

<p>Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.</p>

<h3>How does it work?</h3>

<p>At it's most basic headroom.js simply adds and removes CSS classes from an element in response to a scroll event:</p>

<pre class="language-markup"><code>&lt;!-- initially --&gt;
&lt;header class="headroom"&gt;

&lt;!-- scrolling down --&gt;
&lt;header class="headroom headroom--unpinned"&gt;

&lt;!-- scrolling up --&gt;
&lt;header class="headroom headroom--pinned"&gt;

<p>Relying on CSS classes affords headroom.js incredible flexibility. The choice of what to do when scrolling up or down is now entirely yours - anything you can do with CSS you can do in response to the user's scroll.</p>


<p>Using headroom.js is really simple. It has a pure JS API, and an optional jQuery/Zepto-compatible plugin.</p>

<h3>With pure JS</h3>

<pre class="language-javascript"><code>// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
    <a class="btt btn btn--plain hide-from-print" href="#" id="btt">Top <i class="icon icon--up"></i></a>

<script src="https://rawgithub.com/WickyNilliams/headroom.js/gh-pages/assets/scripts/main.js"></script>
(function() {
    var header = new Headroom(document.querySelector("#header"), {
        tolerance: 5,
        offset : 205,
        classes: {
          initial: "animated",
          pinned: "swingInX",
          unpinned: "swingOutX"

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.