Recreate our auto-hiding sliding navigation
Playing
01. Sliding Navigation

Episodes

0%
Your progress
  • Total: 9m
  • Played: 0m
  • Remaining: 9m
Join or sign in to track your progress

Transcript

00:00
I think one of the most requested snippets over the last few months has been how to get this auto-hiding navigation that you can see over on CodeCourse.
00:08
So over on the desktop version of the navigation, as I scroll down, you can see that the navigation disappears as I'm scrolling down just to give the user a little bit more room to see what they're looking at. However, when you immediately start to scroll back up, you see that the navigation reappears
00:23
because you assume that the user probably wants to go back to the top, choose a different navigation item, or go ahead and hover over a dropdown. So I'm going to show you how to do this today. I'm going to be using a Vue.js application to build this up simply because that's what
00:38
we use for the CodeCourse website. But you can apply these same techniques using just plain JavaScript or even if you're using something like jQuery, you can still follow this and get the same effect. The only difference here is I'm just breaking up the navigation into a separate Vue component.
00:54
So don't worry if you don't use Vue. You can still use this technique as you follow along. So let's head over to the project that I've got here. You can see that I've just got a really simple app view template here just rendering out
01:07
a load of content just to basically fill up the page so we can scroll down. That's really the only purpose of that. You can see that I've got a navigation component just over here and this is just completely empty at the moment.
01:19
So we're pretty much starting from scratch here. The only thing that I have is a background on the body to differentiate between the header color much like on the CodeCourse website. Okay, so the first thing that we'll do is head over to the navigation and we'll just
01:31
start to style this out. You can see I've got a div with a class of nav just in here. So we can just start to build this out and you can pretty much build this out however you want to.
01:40
The only thing that you need to watch out for is here is that the nav needs to have a fixed height. That could be a problem when you're going to a smaller viewport and you want your navigation to be a little bit smaller.
01:53
What actually happens on the CodeCourse website is that the navigation switches out to an entirely new component. So you can play around with this but generally you want your nav to have a fixed height. It doesn't really matter too much, it just won't work as well.
02:05
Okay, so let's go ahead and just start to fiddle around with this. We'll just design this out more or less how it looks on the CodeCourse website. Really important we're going to have a position of fixed on this, background color of white just to differentiate it, and I'm going to set a width to 100%.
02:21
And like I said, I'm going to give this a fixed width height and that will make sense when we get to the JavaScript in just a minute. Now the first thing that I'm going to do is just set the top to zero although we will need to change this because we'll be adding a transition onto this on, let's just say
02:38
all for now, to animate this sliding up and down. So essentially what we want, if we set the top to zero for now, you can see that that just looks like this and it's fixed at the top so we can scroll down. However, what we originally want is this minus 80 pixels.
02:54
This is where the kind of fixed height comes in handy. If you have a navigation that maybe stretches out in height, you can just do something like minus 500 although the animation won't be as smooth. So for now I'm going to do minus 80 and effectively that just makes the navigation disappear.
03:11
So we just start off with essentially no navigation, it's hidden of course at the top of the page. So what we're then going to do is add a modifier on here. So we're going to say nav pinned and I'm just using the BEM methodology here to create out a modifier for this main element and we're going to say top zero.
03:27
So as you can imagine, if we then apply the class in here, nav pinned, that's going to go ahead and show that navigation and you can see that sliding down as that works. So we'll just leave it hidden for now because we don't really need it at the moment. The only other thing that we want to bear in mind is when the navigation is pinned,
03:45
so let's just bring that back to top zero and add this modifier back in, your content will sit behind this. So if I just add an opacity to this of 0.5, you can see that there is content hidden behind that.
04:02
So what we essentially want to do is over on our main app, we always want the padding at the top of the page to be 80 pixels. So I'm just going to set that in there and you can see that that pushes the content down nicely underneath it.
04:14
So we've always got this visible, so that's really important as well. So in terms of the navigation itself, the rest is pretty much JavaScript. We've got this modifier in here that we can use to add in when we want to show this, so the rest is really JavaScript.
04:27
And like I said, I'm going to be doing this all in a view component, but if you are using something like jQuery, you're just going to want to go ahead and fiddle around with this, but the main concept remains the same here. So we want a variable in here that says whether this is pinned.
04:40
By default, we want this to be pinned and then we want to change the class around in here depending on whether this is pinned or not. So again, if you're using something like jQuery, you'd want to use something like the add class method or if you're using native JavaScript, then you can go ahead and add that in.
04:55
So I'm just going to create the modifier in here and say, well, if this pinned is true, then I want it to be pinned. And you can see that we start the site off in the state that the navigation is shown, which of course does make sense.
05:09
So the next thing that we're going to do is create some methods out, or just one method in this case, and we'll create our mounted part of our component now as well so we can immediately call this method. And this method is going to be adding a scroll listener.
05:22
So this is going to do all of the work to make sure that as we scroll, this is hidden or shown depending on what we do. And then just inside of mounted, I'm going to say this add scroll listener just so we fire this off as soon as that component is loaded.
05:37
And if we just bring up our console to monitor this, you can see that we get test in there. And of course, this method is now firing. Okay, so the first thing that we want to do is just using native JavaScript, we're going to add an event listener to the scroll on the page.
05:53
And then when this scroll does run, we can go ahead and get the pixels that have been scrolled from the top of the page. Now I'm not too sure about browser support here because I am using Babel to transpile this.
06:05
But if we say window.scrollY or window.pageYoffset, that should pretty much cover I think all browsers. So if we just go ahead and log out the pixels from the top and we go ahead and scroll here, you can see that we get the pixels from the top.
06:23
We can go all the way back down, all the way back up to zero. So we've now got a kind of point where we're scrolling from. Now what we want to do is just inside of here, create out the menu height. So I'm going to create a constant in here and I'm going to say menu height.
06:37
And again, this is where that fixed height comes in. So we know that the menu height is 80 pixels. And like I said, this doesn't matter too much. But essentially what happens with the Cocos website is as you scroll, it doesn't immediately
06:49
hide the menu. It only hides the menu when we scroll to the height of the navigation. So when we scroll 80 pixels down the page, that's the point we want to hide it. And then once we're down the page and we scroll back up, then we want to show it again all
07:03
the way to the top. So the first thing that we'll do is just create an if statement in here and say, well, if the pixels from the top is greater than the menu height, e.g. we've scrolled 80 pixels, then we're going to set this pinned to false.
07:17
And that's just a temporary thing just to show you how this works. But let's just scroll down and you can see that that goes back up. Of course, it stays hidden because we've not done anything to unpin it. But you get the idea.
07:26
So we scroll 80 pixels in that height. So that's pretty much the first step in doing this. Now what we want to do is inside of here, we want to create a kind of, let's say, pixel trigger, we'll call this, and I'm going to set this to zero.
07:42
This is the trigger point when we start to show, reshow the menu. So for example, inside of here, what I'm going to do is I'm going to set the pixel trigger to the pixels from the top and then for the pinned inside of here, whether we're setting it true or false, we're going to set this on the condition that the pixels from the
07:59
top is less than the pixels trigger. Now what this means is we set it to pinned if we've scrolled from the top less than the newly set trigger. So this is always going to be reset to where we are on the page.
08:14
And that means that when we scroll down 80 pixels, that's hidden and we can continue to scroll. But when we scroll back up, what that's going to do is the pixels from the top is going to be less than the trigger.
08:24
So when we scroll back up, that goes ahead and shows this again. And you can see that I can now scroll up and down and that works perfectly. So I can go all the way to the top, scroll down and continue to go back up again. What you can also do is add an else in here to say that pinned is true.
08:42
And this means that if we're at the top, always keep this pinned. So if the pixels from the top is greater than the menu height, then we want to keep this pinned. So if we just go ahead and scroll, you can see that that stays in position.
08:54
So to be honest, that is pretty much it. It's very, very simple. You can fiddle around with this depending on how you want this to work, how you want this to look.
09:02
But essentially, that's the solution that I use on the CodeCourse website and it seems to be working pretty well so far. It's just a nice way to hide the menu when your users are scrolling down and then obviously make that reappear when they scroll back up again.

Episode summary

In this episode, we dive into one of the most requested UI snippets: creating an auto-hiding navigation bar, just like on the CodeCourse site. You know, that slick effect where the navbar hides as you scroll down for more content space, then pops back into view the moment you scroll up (since you probably want to navigate somewhere else)? We're building exactly that!

We kick things off by structuring and styling a basic navigation component with fixed height and width, making sure it's ready for JavaScript magic. Even though this example uses Vue.js for structure (because that's what CodeCourse runs), the exact same idea works if you're using plain JavaScript or even jQuery.

Once the CSS groundwork is done (setting up the fixed nav, hiding it with a negative top value, and making sure content isn't hidden underneath), we jump into the JavaScript. The secret sauce is listening for scroll events and keeping track of the scroll position. As you scroll down past the nav's height, the nav slides out of view. Scroll up, and it returns.

We walk through step by step how to:

  • Set up a scroll event listener.
  • Work out when the nav should be pinned or hidden.
  • Use classes/toggles to smoothly show/hide the nav.

By the end, you'll have a clean, practical sliding navigation effect you can drop into your own project, regardless of your frontend stack. Super handy for giving users a bit more screen real estate while still keeping navigation close by!

Episode discussion

No comments, yet. Be the first!