Create a Scroll-Activated Sticky Navigation with JavaScript!

-- Today, we'll be stepping into the world of frontend development to create a sticky navigation that's only sticky when a user scrolls UP! This tutorial was inspired by a Twitter thread from Chris Miller.

Check out Chris Miller:

Codepen demo for this tut:

Let's get started!

#frontend #scroll #nav

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

How often do you all utilize a sticky nav/header in some way, shape or form?

[primalscream]

I’ve taken both your courses on Scrimba. I learned a good bit more than just UI. It helped me with a better understanding of doing html and css.

[igortot]

I had a project with this kind of thing few weeks ago. It's nice to see your approach. :D

[abenjamin]

Omg this is awesome thank you 🙏 Gary. I think I’m going attempt to integrate this into a angular component 👍

[pixeledcode]

I was thinking about implementing this today and there it is in video!

[abdelrahmanabdullah]

Great tutorial. This video and a w3 tutorial really helped me. Thanks man.

[MaxWeir]

Would be nice to see you add comments in the logic as you go, it’s great for us to refer to it as your writing your code and it’s something I do in my code workflow

[shahadathossan]

It's a very nice topic I am really appreciate❤❤

[JGuest]

On mobile, IOS will hide the nav once scrolled to the top using this logic:

to fix just wrap your if statements in another if statement where currentScroll > someOffset.

ex:

if (currentScroll > 140) { then add and remove the scroll-up & down classes }

[daniervaliev]

Does anyone know how to have menu appear from the right side.
The logo is by itself, and menu is by itself.

On scroll down, logo will ease out of the screen to the left, and menu to dissapear on the right side, on scroll up, the logo will appear from the left, easing in, and same with the menu, but from the right side.

does anyone know how I would be able to do that?

[abdulsalphan]

Works great, but when I tried to put it in a function and call the function to window.addeventlistener, the scroll-up class ain't getting added when scrolling up.

[vatsalbansal]

@DesignCourse which vscode theme are you using? 😁

[prathameshkurade]

my nav toggle doesn't function properly after i integrated this navbar.

can anyone help me out with this?

[astudio]

I think it's possible to do that with Promise too... We can set current offsetY page in a variable then use .then to compare both of them. is'nt that?!

[ashishmangla]

Can we do this using intersection observer API ??

[pawekoaczynski]

That's a nice feature, yet it's so easy to implement. I might use it in my next project
EDIT: I did it yesterday in React. I also added a sidebar, which hides together with the navbar on scroll up
Also, TIL that YouTube removes hearts on edited comments, which kinda makes sense, I guess

[chacataplan]

Thk!!!! Can you make tuto some reveal element?

[omaryassir]

Awesome stuff 👏
When is the next negative space live ?

[bojanistvancic]

This is nice but what about the events that are non-stop triggering cause of the scrolling? I mean that will happen literaly on every page cause header is always there.

[steveanderson]

Great stuff. It works on desktop, but when scrolling all the way back up on iOS, the menu disappears. iOS appears to sort of bounce off the top and does a small degree of scroll down when swishing all the way back up.