Headroom.js demo

Developer
Nick Williams
Size
3,982 Kb
Views
30,360
  1. Headroom.js demo Previews
  2. Headroom.js demo HTML Codes
  3. Headroom.js demo JS Codes

How do I make an headroom.js demo?

Give your pages some headroom. Hide your header until you need it.. What is a headroom.js demo? How do you make a headroom.js demo? This script and codes were developed by Nick Williams on 21 August 2022, Sunday.

Headroom.js demo Previews
IQ Test

Headroom.js demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Headroom.js demo</title> <link rel="stylesheet" href="https://rawgithub.com/WickyNilliams/headroom.js/gh-pages/assets/styles/main.css" />
</head>
<body>
<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="https://www.github.com/WickyNilliams/headroom.js"> <span aria-hidden="true" class="icon icon--github"></span> <span class="complimentary push--left">GitHub</span> </a> </li> <li class="nav__item "> <a class="header__link subdued" href="http://www.twitter.com/WickyNilliams"> <span aria-hidden="true" class="icon icon--twitter"></span> <span class="complimentary push--left">@WickyNilliams</span> </a> </li> </ul> </nav> <a href="http://wicky.nillia.ms/headroom.js/" class="brand header__link"> <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b> </a> </div>
</header>
<article>
<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>
</header>
<div class="container block main" role="main">
<h2>Downloads</h2>
<div class="downloads" style="margin-bottom:1em"> <div class="grid"> <div class="grid__item one-half"><a class="btn btn--secondary btn--full" href="https://raw.github.com/WickyNilliams/headroom.js/master/dist/headroom.js">Development <span class="complimentary subdued">(3.7kB)</span></a></div> <div class="grid__item one-half"><a class="btn btn--secondary btn--full" href="https://raw.github.com/WickyNilliams/headroom.js/master/dist/headroom.min.js">Production <span class="complimentary subdued">(1.7kB)</span></a></div> </div>
</div>
<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;
</code></pre>
<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>
<h2>Usage</h2>
<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
headroom.init();
</code></pre>
<h3>With jQuery/Zepto</h3>
<pre class="language-javascript"><code>// simple as this!
// NOTE: init() is implicitly called with the plugin
$("# header").headroom();
</code></pre>
<p>The plugin also offers a data-* API if you prefer a declarative approach.</p>
<pre class="language-markup"><code>&lt;!-- selects $(&quot;[data-headroom]&quot;) --&gt;
&lt;header data-headroom&gt;
</code></pre>
<p>Note: Zepto's additional <a href="https://github.com/madrobby/zepto#zepto-modules" title="https://github.com/madrobby/zepto#zepto-modules">data module</a> is required for compatibility.</p>
<h3>Options</h3>
<p>Headroom.js can also accept an options object to alter the way it behaves. You can see the default options by inspecting <code>Headroom.options</code>. The structure of an options object is as follows:</p>
<pre class="language-javascript"><code>{ // vertical offset in px before element is first unpinned offset : 0, // scroll tolerance in px before state changes tolerance : 0, // css classes to apply classes : { // when element is initialised initial : "headroom", // when scrolling up pinned : "headroom--pinned", // when scrolling down unpinned : "headroom--unpinned" }
}
</code></pre> <h2>Examples</h2> <p> Head over to the <a href="http://wicky.nillia.ms/headroom.js/playroom/">headroom.js playroom</a> if you want see some example usages. There you can tweak all of headroom's options and apply different CSS effects in an interactive demo. </p> <h2>License</h2> <p> Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. </p> <div class="sharing"> <h2>Share this on:</h2> <div class="grid"> <div class="grid__item one-third"> <a class="sharing__button btn btn--secondary btn--full" href="http://facebook.com/sharer.php?u=http://wicky.nillia.ms/headroom.js/">Facebook</a> </div> <div class="grid__item one-third"> <a class="sharing__button btn btn--secondary btn--full" href="http://twitter.com/intent/tweet?url=http://wicky.nillia.ms/headroom.js/&amp;text=Headroom.js. Give your pages some headroom&amp;via=WickyNilliams">Twitter</a> </div> <div class="grid__item one-third"> <a class ="sharing__button btn btn--secondary btn--full" href="https://plus.google.com/share?url=http://wicky.nillia.ms/headroom.js/">Google+</a> </div> </div> </div> </div> <a class="btt btn btn--plain hide-from-print" href="#" id="btt">Top <i class="icon icon--up"></i></a>
</article>
<script src="https://rawgithub.com/WickyNilliams/headroom.js/gh-pages/assets/scripts/main.js"></script> <script src="js/index.js"></script>
</body>
</html>

Headroom.js demo - Script Codes JS Codes

(function() { var header = new Headroom(document.querySelector("#header"), { tolerance: 5, offset : 205, classes: { initial: "animated", pinned: "slideDown", unpinned: "slideUp" } }); header.init(); var bttHeadroom = new Headroom(document.getElementById("btt"), { tolerance : 0, offset : 500, classes : { initial : "slide", pinned : "slide--reset", unpinned : "slide--down" } }); bttHeadroom.init();
}());
Headroom.js demo - Script Codes
Headroom.js demo - Script Codes
Home Page Home
Developer Nick Williams
Username WickyNilliams
Uploaded August 21, 2022
Rating 4.5
Size 3,982 Kb
Views 30,360
Do you need developer help for Headroom.js demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Williams (WickyNilliams) Script Codes
Name
A Pen by Nick Williams
Particle particulars
And just like that...
Block, Element, Modifier in LESS
Bokeh
JS module pattern demo
React starter template
Conditional Lightbox for Responsive Design
Pointed
Gridzzz
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!