FREELessons: 8Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Headroom.js

Headroom.js is a very lightweight plugin that is designed to hide a header element until you need it. Of course, that’s not the only thing you can use it for, but it certainly works best when used on a header.

Let me show you a simple example.

Related Links

2.1 Headroom.js

Headroom.js is a very lightweight plugin that is designed to hide a header element until you need it. Of course, that's not the only thing you can use it for, but it certainly works best when used on a header. Let me show you a simple example. Right here I have a demo page setup that has a fixed header on the top with a logo and navigation, and then four sections. So as you can see because this this header is fixed, it stays on top of my page at all times. But what I want is when I scroll down I want this header to disappear. And when I scroll back up, I want it to reappear and that's something that can be done real easy with the headroom plugin. So looking back at the HTML and CSS code, very simple mark up here for the header, I give it an ID and a class of header room. And then I have an image for the logo a URL for the navigation. On the CSS part, I just have some demo styles written up here. And for the headeroom, I set a position fixed. I set its width to 100% and I just give it some, more styling to make it look like this. Now to get this plugin, you can navigate to the official GitHub page, you'll also find the link in the lesson notes. And a couple of ways you can install this, you can grab it via npm or yarn or you can use this universal build from unpackaged. So I'm going to copy that, we're going to jump back into the code and right before the end of the body tag, I'm going to do a script src and we're going to paste that in. And now our script is loaded. And let's do another script. And here we're going to put our JavaScript code. Of course, you can do this with an external JavaScript file if you want, but because it's a tiny amount of JavaScript code, I'm going to do it in line here in the HTML document. So we start very simply by setting a variable. You can call this whatever you want. And I'm just going to reference that main header element, right? Which is this and then I'm going to create another variable. Again, you can call this whatever you want and I'm gonna say new Headroom. And I'm gonna pass in the main header variable that points to my header element. And then we can pass in some options if we want to. And then finally, we have to initialize the plugin. So I'm gonna say headroom and we're going to call the init method. All right, so now if we take a look, you'll see that as I scroll down nothing really happens on the front end. But let's have a closer look at the the code behind. Now, on my header element, I have some additional classes. Headroom was there by default, but now I have headroom--not-bottom, headroom--pinned, headroom-top. And you'll notice that as I scroll down, these classes will change or at least some of them, see? Now it's a different class. So now what we have to do is target those classes in CSS and make them do whatever we want. So we can add animations, we can simply hide it and then show it. It's really up to us. So back here in CSS, I am using SCSS here to write my CSS and I am using codekit for all of this code and codekit will automatically compile any SCSS files I have. And it will also do browser refreshing for me. This is a Mac only app. If you don't have it, you're gonna have to compile this CSS or the SCSS code by hand if you're using other operating systems. So right here I'm going to target first headroom--pinned. So headroom--pinned is the class that is applied when my header is at the top, see? Now it has the class of headroom--pinned. As soon as I scroll down it says headroom--unpinned. So for headroom--pinned, I'm simply gonna do a transform, translate 3D, and I'm gonna reset the values to zero. I'm using a transform, because I wanna create a nice animation. I don't want it to just disappear and show up. I want it to slide up and down. So then we can target, headroom--unpinned. And on the transform, here I'm going to say -100% on the y-axis, that means it's gonna be moved to the top, its entire height. Basically, it's just gonna hide it altogether. And that's all there is to it. Now if we take a look at our page, you'll see that as I'm scrolling down that header disappears the second I scroll down. And let's say I'm here somewhere, when I scroll back up, the header just pops into view. I think this is very handy because if you think about it, when you're scrolling down a page or looking for the actual content, you're not really interested in the header. But when you're scrolling back up, then it probably means that you want to get back to the top, in which case having the header visible could be very useful. Now let's say that I want the header to disappear when I'm further down the page all right? Not immediately. Well, there is an option for that, and it's called offset. And you can pass it in, in this option object here. So offset, I'm gonna say a value of 500. So now, you'll see that I need to scroll down a certain amount of pixels, in this case 500 before, oops, I accidentally refreshed there. So you'll see that it doesn't just automatically disappear I need to scroll down to 500 pixels before it's activated. There we go. And of course you can do any value that you want here. Here is how it behaves on 1500 pixels, right? So scroll down, scroll down, scroll down, and then when it reaches 1500 pixels Then, it's gonna disappear. For me, I'm just gonna leave it at 500. Now, something else you can do and this is very interesting. Because we have all these classes we can play around, we can also affect elements directly based on the class that's applied to the header. For example, this download link is okay when I'm in the middle of the page, but I don't wanna see it when I'm at the top, because presumably when you're at the top, you already have a download link somewhere. I don't have it in this demo, but usually that's the case. So how can I hide this when I am at the top, but show it when I am further down the page? Well, by using the classes, I can do the following. The actual link has an ID of link cta, so I can target it like this. I can set an initial display to none. So by default that's hidden. And then I can say, headroom--pinned, but also headroom--not-top link-cta I can set a display to inline block, or whatever it is. And actually this is with a double dash there. Okay, so now what happens is that by default this is hidden, and you'll see that when I scroll back up, it's now visible. When I get to the top to that threshold, it disappears again, see? It is visible here but when I get to the top, now it disappears. So that's basically what you can do with Headroom.js. Now when it comes to configuration, if you go to the GitHub page, you'll find a link to the documentation and that will actually take you to the official website for headroom. And here where there is option you will find the list of all the options you can use to customize this plugin. So here is the one that we used the offset. You can also set tolerance values. You can also change the classes that are applied to your header element, like the pinned class, the unpinned class and so on. And also you have some callbacks that you can use to add some more functionality to it. So go ahead, check these out and customize this just plugin to your own liking. All right and that's a quick demo of what you can do with Headroom.js. Now the next plug in on our list can be used to create animated SVG progress bars. Its called ProgressBar.js and you'll learn all about it in the next lesson.

Back to the top