Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Arturo Espinoza
Arturo Espinoza
9,181 Points

How to install headroom.js (hide menu on scroll)

I have been trying to add headroom.js ( http://wicky.nillia.ms/headroom.js/ ) to my menu/nav but I cant seem to make it work. Can someone please explain what I am doing wrong. TY.

HTML:
script type="text/javascript" src="headroom.js" /script

header id="header" class="headroom headroom--unpinned headroom--pinned" h1Menu/h1 /header

CSS:
.headroom { transition: transform 200ms linear; } .headroom--pinned { display: block; transform: translateY(0%); } .headroom--unpinned { display: none; transform: translateY(-100%);

JS:
https://raw.githubusercontent.com/WickyNilliams/headroom.js/v0.7.0/dist/headroom.js

1 Answer

Miguel Palau
Miguel Palau
24,176 Points
Miguel Palau
Miguel Palau
24,176 Points

You are only adding the code for headroom. Remember to run it as well.

There are instructions on the site depending if you do that with pure js, jquery or angular.

Try that first and come back again.

Cheers

Arturo Espinoza
Arturo Espinoza
9,181 Points

How do I run the code?

Miguel Palau
Miguel Palau
24,176 Points

According to the website and the documentation on there I'm going to copy and paste what they say is the way to run it.

Usage

Using headroom.js is really simple. It has a pure JS API, plus an optional jQuery/Zepto plugin and AngularJS directive.

With plain JS

Include the headroom.js script in your page, and then:

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();