Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:52 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Headroom.js

Headroom.js is a very lightweight plugin that is designed to handle fixed headers or navbars. That’s not to say that it’s the only thing you can use it for, but it certainly works best when used on these types of elements.

This plugin lets you show and hide the navigation when appropriate, by reacting to the user’s scroll. Let me show you an example to explain what I mean.

Related Links

2.1 Headroom.js

Headroom is a very lightweight plugin that is designed to handle fixed navbars and headers. Now, it doesn't mean that's the only thing you can use it for. It just means that it works best when it's being used on those types of elements. So I've prepared a little demo for you. Let me show you how you can use it, and what it's good for. Now, let's take a very simple web page, the one where you have content, and on the very top you have a header or a navbar with the logo and your navigation, basically, right? And what you would do most of the time is you would make this navbar fixed. So it's always there if you need it. It's gonna stay fixed even if you scroll down the page like this. Now, to make that happen you would set a position fixed to that header. So let's do that right now. I am using CodePen. I will be using it for this entire project. I have a project set up here, and you can check out the link in the lesson notes to see the final result. But you can use whatever code editor you want if you're following along. So in here, I'm gonna go to my styles.scss, and I'm gonna set a position: fixed; on my navbar. I'm also going to set a width of 100%. And let's set its top value to 0, save. So now we have a fixed navbar. It's always there, even if we scroll down, no matter where we are in the page, the navbar always stays on the top. But what if we don't want that? I mean, let's think about this. When we scroll down, it's more likely that we want to see the content. We don't necessarily want to see the navbar, right? But when we scroll back up, it means we want to go back to the page. We want to access content that's on the top of the page, right? So instinctively, if you want to reach a navbar, you would scroll up. So it would be nice that our navbar would be available when we scroll up, but would disappear when we scroll down. And that's what this plugin is all about, that's exactly what it's doing, right? So let me show you how to make it work. First of all, you have to include the necessary files. And I left links in the lesson notes where you can download Headroom. There are links to the GitHub page, and you can get it from there. Basically, what I did was just added the script on the bottom, loading headroom.js. And then finally, after that, I have a script that executes after the DOM has finished loading. So what I'm gonna do is I'm gonna create a headerElement. And I'm gonna reference the element with the class of headroom which, if we look back in the HTML, is this header, . So I'm gonna reference this one, and that's one variable. And then I can declare another variable where I simply say headroom = new Headroom, this time capital. Please notice that these are not the same. This is a variable, you can call this whatever you want. And this is the class name from the main headroom plugin. So this is what you would use to initialize it. And in here, I'm just gonna pass in the headerElement, and then I can pass in another object with a couple of properties. For now, we're just gonna leave it blank. So now all you have to do is simply say headroom.init. We're gonna call the init method like this. So now I'm gonna save. So if we go back and we take a look in the inspector, we're gonna see a couple of things. First of all, that header with the class of headroom now has additional classes. Headroom--not-bottom, headroom--pinned, headroom--top and so on. So when I scroll back down, you will see that the classes change. It's now headroom--unpinned. All right, let's scroll back down. And when I scroll back up, notice the class changes again. So what we have to do is style elements based on these classes. And I'm gonna add some classes, headroom--pinned, and this is with a double dash. So the easiest way to do this is to set display: block. And then headroom--unpinned, I'm gonna set display to none. I'm gonna save this. So now if we scroll down, you'll see that the header, or the navbar, disappears. And when I scroll back up, it reappears. Now, this particular transition is not very subtle. So let's do something better. Instead of display: block, let's add a transform, right? So we'll say transform: translateY(0%). That means it's at the very top. And when it's unpinned, I'm simply going to move it up by its own height, so -100%. So what I can do now is simply go back to the headroom right here, and I can set a nice transition for that transform. So transition: transform, let's put it at .3 seconds, and let's make the easing linear. Okay, let's save that. And now, we have a totally different transition, yeah? It just slides up and down depending on the scroll direction. That's nice, right? So when you scroll back down, you have more screen real estate to read all of your content. And when you go back up, you might need the navbar, so it just pops back down. That's very, very cool. Now, Headroom is also customizable, all right? So you can set in this options array here, we can set various options, like, for example, offset. And offset tells you basically when the class toggle should take place, right? So if I set this to 220, you'll notice that I need to scroll a bit more before that class swap is triggered, right? Before it was like almost right away. But now, I must scroll down about 250 pixels for the change to take place. You can also do something very interesting. You can use the classes that we saw right here, right? There are a few additional classes, like headroom--not-bottom, headroom--top. And these are classes that are added depending on the scroll position. So right now, I'm at the top. So I have the class of headroom--top. But if I scroll further down, you will see that I have the class of headroom--not-top. When I hit the bottom, I have the class of headroom--bottom. So you can use these classes to your advantage. For example, I can use them to choose when to display this Buy now button. So, for example, if I want to only display the Buy link when I'm at the bottom and I'm scrolling to the top, like in this situation here, then I can do something like this. I can go into my CSS, and I can say the following. I'm gonna target the #buy-link, and by default, this will have a display to none. And then, I can say headroom--pinned, but also headroom--not-top #buy-link. And I'm simply gonna set a display to inline-block. So I'm gonna save that. And now, that Buy link is hidden by default. And it's only displayed when I'm not at the top. You'll notice that when I get to the top, it disappears. So this could be very handy, like, for example, if on the top you have a call to action area that has the same button. There's no point in displaying it on the call to action and on the navbar. But when I'm at the bottom, it would make sense to display it in the navbar because that's the only place I can see it. And Headroom has a lot more options. I encourage you to check out the GitHub page, and check out the documentation there, you can see all of the options and what other things you can do with it. This is a very basic example, but it's an example that I think covers pretty much the whole use of the plugin. And that's about it for Headroom.js. In the next lesson, we'll cover a JavaScript plugin that can create responsive progress bars. I'll see you there.