Highlight Nav Menu on scroll with JavaScript

[@JoshPalmeroc]

Great tutorial man! What I did take make it a little easier to maintain is instead of selecting all the li, I selected every "a" tag and got its href attribute then did a substring to remove the "#". Then i checked that against the "current" variable. that way you don't have to add classes to each li. const navLi = document.querySelectorAll('.tabs__item a'); navLi.forEach(li => { li.classList.remove('active'); const href = li.getAttribute('href').substring(1); if (href === current) { li.classList.add('active'); } });

[@webcifar]

Great 👍

[@Matin1999_unique]

this tutorial is just perfect and what programmers are looking for. 👍

[@AjSarco]

life saver tutorial , thanks man, I've been struggling how to highlight section on navbar, I'm almost done with my project and this is the only thing I'm stuck with.

[@MrTomequ]

Cool video, thanks. Small suggestion. If you set the value of current on 'home' (current = 'home') instead an empty string, than you'll have button-background on Home at the beginning and when you click again Home as well. Gr.

[@webcifar]

That’s great 👍

[@gaurishnaik8288]

Thankyou this helped ne

[@skullnecroze]

The best tutorial about this on the web. Thanks very much for share this with us!

[@gabrielfono844]

Thanks so much sir I brought the same logic into the startup I am currently building with React. I used useRef instead and everything is smooth. thanks again have a wonderful day and your family love from Seattle Washington

[@tusharkadian]

It is better to add class on tag instead of ?

[@ichigolei4637]

Just what I needed! I made minimalist navigation side bar, just lines to redirect my five sections, and was wondering how to change the background color when passing each section. thank you so much

[@kunalpatil1250]

thanks man i implemented this in react

[@photoinshot1355]

Brilliant tutorial, very helpful and very well explained and demonstrated, great code, great teacher, thanks!

[@esmailkhalifa3984]

I have been looking for it for three days😶 Finally ❤️🙂

[@webcifar]

♥

[@MrWebDesignerAnas]

thank you sir it was really helpful

[@webcifar]

Glad it helped

[@freddymoreno9300]

Great Great Great TUTORIAL! simple, concise, and intereting. Thank you! keep doing great stuff

[@rosehope5376]

Thank you really it was a good one ..

[@webcifar]

Glad you liked it!

[@simond.7448]

Thank you very much for this quick guide! It's awesome.

[@photoinshot1355]

Excellent video, brilliant tutor, he explains things really well, clear well presented video, thanks!

[@nimi_nomo]

Thanks so much. Helped a lot

[@alphamx13]

Great tutorial, thank you!

[@kese1135]

Thank you so much! You're the best!

[@webcifar]

You are welcome ❤️

[@abdulraffy5398]

Nailed It!

[@alexkelso1649]

thanks so much legend. Learned so much watching this.

[@guilhermehammes1516]

simple and functional! thanks for the great video

[@webcifar]

Thanks

[@havefun5519]

Thanks, this is what I want

[@noahdwhitney]

Be careful. You are adding a scroll listener, which fires a ton even on a short distance scroll. Every time the scroll event is fired you are iterating through a list of elements. This method could be extremely expensive. You should include logic in event listener callback to throttle how many times the iteration is done.

[@istiakahammad7074]

Finally i got it. Thanks

[@tinghuang3218]

Great tutorial! This is perfect and helps me a lot. Thank you so much👍

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@webcifar]

Obrigado

[@andreydario26]

puta video

[@kennyakins3536]

This really helped a lot 👏

[@webcifar]

Glad it was helpful.

[@chaipiyo]

thank you so much brother .. very well explained

[@lanhphalla1623]

Very good video. Can you create the video of this in small screen and move navbar by base on scroll?

[@thanhannguyen2565]

It is extremely easy to understand.

[@selsen9011]

i have the problem that my sectiontop does not show, when i type "console.log". my Sections are all diffrent in height. the console.log on sections worked, so it knows where the sections are, but cant figure the offsetTop out.. Do you know why that is?

[@ankitkumarravidas6062]

yu are my life save bro thanks

[@mwmersal]

Wooooow! this was unbelievably helpful mate. Thanks ^^

[@webcifar]

Glad to hear it!

[@richardshaju]

Thank you so much 💝🥰

[@patricioscida3949]

Great video, thank you so much.

[@webcifar]

You're very welcome!

[@user-gw3yd8ev6p]

Thanks for tutorial, it's very useful!

[@raomudasir4509]

really awesome bro

[@ogunkayodeoluwaseun9348]

What would happen if the nav li's had multiple sub-links ??? @WEB CIFAR

[@tszpang9917]

Thanks for the tutorial! Worked for my project :D

[@webcifar]

Glad it helped!

[@liluo7790]

thank you so much ! thank you so much man

[@webcifar]

You're welcome!

[@valeriyadolya8412]

Thank you very much, it helped me a lot!

[@guxsta3217]

Thank you so much!! Amazing video

[@senju31]

I'm not seeing the footer in console.log. I see the home and about section but not the footer.

[@imranhossainbpp]

What if i want to add class in the nav while scrolling in a particular section ? Love from @Bangladesh

[@ThisIsAhn]

ধন্যবাদ ভাই

[@sandeepsv3514]

thanks thank you so much for the video it means a lot

[@webcifar]

Glad it helped

[@ryukagai]

Exactly what I needed! Thank you :)

[@webcifar]

Glad it helped!

[@selah_2215]

Thank you very much! Your tutorial helped me a lot. At first I was kinda struggling troubleshooting, but it was the most fun part. It was worth it. ;> Really really thank u 🙏

[@webcifar]

Glad it helped!

[@ujjalzaman2722]

thank you so much for this one.

[@webcifar]

You're very welcome!

[@paalaleksander]

Thanks for this! Helped me a lot!

[@webcifar]

Glad it helped!

[@jmcoxD]

Excellent tutorial!

[@shaaa00]

Thank you for sharing this tutorial, it really helped me

[@webcifar]

Glad to hear that!

[@ankitraj5ar]

very useful !!!!!!

[@nadirmohamed8274]

You are the best bro

[@webcifar]

Thanks

[@SamFourieOfficial]

My sections variable just has an empty list, so it does not pick up the sections.

[@thangphan6047]

Thank you so much :)

[@gabrielfono844]

sir I would love to start a youtube channel could you tell with software you are using to record a course and which software you use to edit. also which microphone and camera you are using I really love creating content that is why I am building an application to share my content

[@webcifar]

That's awesome. I use OBS to record, DaVinci Resolve to edit and for the microphone I use BM800. For now, everything is working fine for me with this setup.

[@gabrielfono844]

@@webcifar thanks a lot 🙏

[@__-qp9dl]

당신은 천재입니다. 감사합니다 !

[@giovannimichel5506]

Thank you for the intel

[@sairaghava6111]

This implementation is breaking when I change the screen resolution, can you help here

[@_4zad]

Great vid, learned a lot!

[@dustinbest1326]

Nice video! Thank you!

[@siawonderswhy]

very helpful thank you

[@webcifar]

Glad it was helpful!

[@Rystaal]

Don't work for me if section's height is in %... any advice to fix this issue?

[@shas3626]

Great video..had a question i am getting my section.OffsetTop as undefined.Can you help me with this?

[@duvvadasaibhargav9879]

Thanks for your tutorial learned a lot

[@webcifar]

Glad to hear that!

[@harshilparmar9076]

Thanks bro!!

[@vishnuk9628]

how to keep the selected nav color the same even after refreshing the page

[@dibanpitchaimuthu9336]

Great vid, just one error I noticed you forgotten 's' at 10:04 for transition

[@LordzChilight]

thank you, learn a lot :D 🙏

[@alamineuropeanit583]

thanks. I like this tips

[@ranadebnath5421]

thanku so much bhai ...

[@webcifar]

Welcome Bhai ♥

[@eddi3ms]

very helpfull, thanks alot !!

[@webnirbhar785]

How to open collapse data when scroll down in js Please help

[@a.j9157]

Great video man keep up !

[@webcifar]

Thanks, you too!

[@victory_lucky]

nice, but please zoom in a little bit when recording, watching on mobile is quite difficult.

[@webcifar]

Noted. ❤

[@tiendang5149]

Very good , thank you!

[@webcifar]

Our pleasure!

[@MohamedMedhat-ic5ng]

thank you

[@ahmadyamout6867]

Hello dear .Your code is not working because Pageyoffset is deprecated what is it's alternative please ?

[@nadirmemmedov6071]

good

[@webcifar]

Thanks

[@MuhammadRizky-ub3oy]

why is my home offsetTop returning 0?

[@osman1110]

hi how would you make it diff colours for each section?

[@samarjamil3053]

Awesome Bro! ❤️

[@webcifar]

Thanks 🔥

[@tomo_3883]

Vsc theme?

[@PreejalRatnaSilakar]

helpful

[@webcifar]

Glad it helped

[@omarakki705]

Thank you my brother

[@webcifar]

You are welcome

[@omarakki705]

@@webcifar do you have a tutorial in javascript

[@entertainmenthut8896]

Your tutorial does not work for me. I am using sublime 3.

[@TommyTips]

It's cool ;)

[@webcifar]

🤟

[@AzulCieloBlue]

When I scroll to the bottom the last section is not beign detected. help please! Cool and really helpful video btw

[@mariyanesvyetaylo6264]

Hello, thank you so much for this video - very helpful! I wonder if you can help me : I want to add .scrollIntoView({ behavior: 'smooth', inline: "start" }) when clicked on nav item(so the correspondant section scrolls smoothly into view), but can't figure out how to get the "section" id to match li class.. navLi.forEach((li) => { li.classList.remove("active"); if (li.classList.contains(current)) { li.classList.add("active"); } li.addEventListener("click", () => { let liClass = li.getAttribute("class") ???????????? }) }); sorry if this is confusing >_>

[@Sebeklis]

There are tons of problems with routing etc.

[@zayednation3692]

bro, can u do it for react js?

[@hugoshaco8149]

When you are on home and click to footer: the animation ("active" so the red bg) is visible on all other nav button during the autoscroll idk if someone know what i mean :D also thx for this video

[@senju31]

There's a KZbinr by the name of Bedimcode that implemented this feature in this video kzbin.info/www/bejne/bJTMlZWLfbONiLM but he did it differently from yours. I think yours was quicker to grasp because you explained what you were doing but he doesn't speak in his videos. I actually was able to break it down by watching your video and further reading and testing on my part. I may make a KZbin video on it , explaining how Bedimcode made his own work

[@aminzorriyeh2782]

how can i get this cod

[@harshjha271]

Please explain properly i did'nt understand the logic in (if condtion) if anyone understand please explain this logic to me

[@r18570]

thank you bro

[@omarfarouk2080]

Thank you bro!