Create a Scroll-Activated Sticky Navigation with JavaScript!

[@DesignCourse]

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

[@lassef3692]

-test-

[@primalscream40]

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.

[@igortot01]

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

[@frz_akbar]

finally now i know how to do this

[@nishanthdipali6838]

Same feeling

[@Ree-rr1js]

Indo?

[@frz_akbar]

@@Ree-rr1js yes 😅

[@Ree-rr1js]

Self taught atau kuliah bang?

[@frz_akbar]

@@Ree-rr1js ya kuliah ya otodidak, tapi lebih banyak dari organisasi sih daripada kuliahnya, sisanya otodidak

[@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

[@TalisonBrendon]

OMG, this is exactly what I needed

[@pixeledcode]

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

[@abdelrahmanabdullah2694]

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

[@abenjamin13]

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

[@pawekoaczynski4505]

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 KZbin removes hearts on edited comments, which kinda makes sense, I guess

[@chantingdroneflutes]

Haya, how did you do this in React, I'm trying to adjust the code Gary provides and am a bit stuck...

[@bojanistvancic6237]

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.

[@ПРОГРЕСС-л4л]

I am also worried about it. Do you have any better ideas to achieve the same result without affecting the performance of the website?

[@francescociulla]

Amazing video and audio. Damn man your hair has grown a lot xd!

[@DesignCourse]

Lollll. In 2 years it's going to be nuts!

[@steveanderson7960]

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.

[@steveanderson7960]

I added this and it works on iOS: if (currentScroll

[@hanifakbari3675]

@@steveanderson7960 this case same with me

[@vatsalbansal135]

@DesignCourse which vscode theme are you using? 😁

[@bootifreshful]

another great tutorial!

[@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.

[@shadat-hossain3500]

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

[@galickidigital]

Sweet and professional

[@astudio4607]

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?!

[@venkataramireddypulikhanda6071]

Useful content 👌👍👏

[@Rdrudra99]

Thank You 🤩

[@daniervaliev6370]

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?

[@erikslorenz]

I like this lighting better than the pink. Couldn't see you

[@surajchanda7992]

Which vs code theme you use?

[@josephnetherland880]

I like your channel so I've decided to bombard it with comments.

[@omaryassir5885]

Awesome stuff 👏 When is the next negative space live ?

[@DesignCourse]

Maybe this Friday or Saturday.

[@chacataplan]

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

[@naraku3232]

i am impressed with your biceps haha

[@prathameshkurade8595]

my nav toggle doesn't function properly after i integrated this navbar. can anyone help me out with this?

[@Yair-Harel]

Thank you!!

[@ashishmangla221]

Can we do this using intersection observer API ??

[@JGuest777]

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 }

[@FurikuriYugi]

So much win. 🏆

[@maneeshrockx667]

I guess using intersection observer api will make it more easy...

[@bharat61020]

What is intersection observer api??

[@afplaktape]

Is it also possible to do this with an offset of 50px before it disappears?

[@DesignCourse]

Yep. Need to wrap it in an if statement before you add the class that makes it disappear, I imagine.

[@steveanderson7960]

@@DesignCourse Adding this worked for me: if (currentScroll

[@asphaltking5870]

thanksss you so muuuuuuuuuuuch

[@omkarp9943]

Is this work with CSS? Because you did with SCSS!!

[@AllenMarsam]

Thanks

[@czerskip]

It may look like fun, but it's a UX nightmare. just stick it and leave it there, having to scroll the other direction to reveal navigation is painful for the users.

[@mujakapasa]

Tell that to people that use screenreaders and where the website has no skip links. Then navs on scroll up are the only timesaver for them. + if the fixed sticky nav isn't designed properly it will distract from the main content. An UX nightmare is a hamburger navigation on desktops, but not a sticky on scroll up.

[@czerskip]

@@mujakapasa The screen readers have absolutely nothing to do with how the existing navigation is animated or displayed for regular browsers, no idea how you made that connection. Your second point makes even less sense: the designers botched their job, so we should introduce another UX problem on top of the poorly designed navigation? It's absurd, and unfortunately the way many websites are designed and developed, especially for large corporations.

[@mauricioviera6]

LinkedIn and other big companies implement this nav behaviour. I guess they know a little bit more than you about what's useful to the users 🙂

[@Ripred0219]

Ig there is a cost for everything. Sure the user will need to scroll up slightly but in exchange they get a more immersive experience. By removing the nav bar it’s kind of like removing a distraction for the user to solely focus on the important content

[@davidfitcher2953]

What does that hair say?

[@Uncaught_in_promise]

@Garry Simon you look like Tom Hanks

[@wibowomuhmmad]

const body = document.body; let lastScrool = 0; window.addEventListener("scroll", function(evt) { let current = window.scrollY; if(current > 0) { body.classList.add("hide-nav") } if(current < lastScrool) { body.classList.remove("hide-nav") } lastScrool = current; } // style.css header { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 70px; transition: all 300ms ease; } .hide-nav header { transform: translateY(-100%); } I found an easier way, inspired by this video

[@franktielemans6624]

or use headroom.js (1.38Kb)

[@giribhushanch1726]

I think 1st like and comment are given by @DesginCourse

[@mun3673]

It's soooooooooooooooooooooo complicated😟😟😟

[@giribhushanch1726]

1st comment

[@TheForgotten366]

i thought i was ricked rolled he looked like rick ashley