How to Change Navbar Background Color on Scroll | HTML, CSS & Vanilla JavaScript

[@HelloCostello]

This is THE FIRST video on this subject that has a) worked for me and b) TAUGHT me how it works. Everyone else is a copy-paste-there-you-go video; you actually talk through how it works and why it works. Thank you! You’ve actually helped me so much!😊

[@sharminoomatia]

I am glad this helped you, thank you so much for all your kind words 🙌

[@jessicawailes4938]

thankyouthankyouthankyouthankyou!!! Bootstrap 5 changed how they loaded javascript, so the old BS4 solution didn't work anymore, but that's all the "answers" on google had. This was the only pure JS solution I found, and I'm so so so happy it works now. Thank you!!!

[@sharminoomatia]

I'm glad! :)

[@philipmwangi5270]

Trust me, your explanation is really awesome. Keep making content.

[@sharminoomatia]

Sure, thank you so much!

[@steevenjackson667]

Wow! Good explanation !
I was looking for a solution for 1 hour before I came across your video. Thank you so much.

[@traveldiaries9597]

I have seen dozen of videos about changing background colour. Of navbar while scrolling and everybody did the javascript stuff but only you explained by putting the values in the javascript and showing the console log how does it work, and then it clicked me how values play .....thank. You dear

[@sharminoomatia]

I'm glad, it helped you!! Thank you so much!

[@alexismanzano752]

this is without a doubt, the easiest way to do it. fantastic job thank you so much!!

[@sharminoomatia]

Thank you!

[@pankajmaru9464]

Thank you so much, ma'am. The way you explained is superb. 👍

[@Mostafa-jh2ij]

I really appreciate you and this wonderful video! Myself being a beginner, you actually helped me a lot!

[@sharminoomatia]

I am glad 😊

[@aaronkenney_17]

This was a fantastic, easy-to-follow tutorial, thank you! I coded the function for my navbar a little differently but the basic structure was the same. It's too bad the transition property doesn't seem to effect the background-image gradient property, but I guess I'll settle with using a basic background color instead.

[@chadcaballero1626]

Nice explanation! Thank you for sharing.

[@mahtab_sudip]

Thanks!!!
Keep going to success in youtube.

[@sharminoomatia]

Thank you!

[@MartinExequielFuraca]

This was absolutely helpful, i really appreciate it!
Thank you so much, keep up the good work!
Greetings from Argentina!

[@Jayakumar-uq1tv]

good explanation, and very usefull💯

[@stoyansarov2647]

Thank you. Very nice explanation and straight to the point.

[@bhojaksmith]

Was looking for exactly this and it works well !
Thank you :)

[@juliberk]

Thank you so much for doing this tutorial. It was extremely helpful 🤗

[@sharminoomatia]

Thank you so much!! You can check my other videos as well 😁

[@mascode1]

This is great sharmin

[@356_sybmsa_nabaoomatia2]

Wow! Good explanation 👍🏻 keep it up☺️

[@sharminoomatia]

Thanks 😊❤️

[@sanskargupta407]

well explained , thanks for the video

[@oscardiaz3968]

Just what I was looking for. Thanks a lot!

[@sharminoomatia]

You're welcome!!

[@youtubebaba9287]

Thank you so much for this simple function....I understood it and will be able to apply just because you explained very well 😇
Thanks again 😋

[@tcrdev]

it was quite helpfull, you made it clear and easy...

[@sharminoomatia]

Thank you!

[@reket777pvl]

Alhamdullilah thanks for your tutorial sister

[@medblack4548]

I was struggling with that , thank you .

[@sharminoomatia]

I'm glad, thanksss!

[@lucas6845]

Thank you so much, you just save me.

[@sharminoomatia]

I'm glad!

[@SonuYadav-pw1rz]

Excellent 👍

[@sharminoomatia]

Thank you so much!!😄

[@grishmitapandey1823]

Nice Explanation & very helpful ❣

[@sharminoomatia]

Thank you so much ❤️

[@youtubebaba9287]

Looking for some more cool stuff like this...freshers like me are eager to learn.

[@anastasiia7345]

Very helpful, thank you!!

[@RajibAhmad]

salam sister.... very good tutorial... please keep up the good work :)

[@sharminoomatia]

Thank you!

[@bookwyrm4559]

Thank you. You are a life saver

[@Irshadmakntojia]

Mashallah Allah aapko khub tarakki de Ameen summa Ameen

[@sharminoomatia]

Thank you!

[@FactsForever-n]

it was very very helpful

[@eric31022]

Hey liked the video. Can you make more JavaScript for beginners videos

[@sharminoomatia]

Sure, thank you so much!!

[@safiapatel2834]

Thanks for sharing 👌

[@sharminoomatia]

You're welcome!

[@adrianojedaf]

Great explanation! Thank you for sharing.

[@sharminoomatia]

I'm glad u liked it 😊

[@akshayverma1828]

Make more videos it was as simple as learning to boil a water.

[@sharminoomatia]

Thank you, I'm glad :)

[@sharminoomatia]

Sure I will!!

[@FancisReyes]

Thanks so much!!!!

[@marieemoon]

Thank u sooo much, your video has helped me a lot!! :3

[@sharminoomatia]

You're welcome! I'm glad!

[@CoolMotivation-shorts]

Nice video 😇

[@AlexIvanov-uh1yz]

thx very good explained

[@CarlosRamirez-re9mp]

Than u, keep it up!

[@bellojoseph6838]

This is great

[@sharminoomatia]

Thank you!

[@sajedulislam5341]

awesome

[@ahmadsalahuddin4570]

THANK YOUUU!! :D

[@hipo4710]

how can you add a transition from with color to transparent when scrolling up?

[@logicodez8530]

Write an else block for scroll value less than the previous one.

[@luckyjangir8303]

i hope you grow up faster

[@sarad.cinanima2704]

Grande!

[@sargisdavtyan6676]

thank you so much👍👍

[@gokulg6987]

Tq so much

[@_Rohit_Kumaar]

Thank You 👍

[@Imvdee]

Thank you !

[@risuday]

thank you ❤

[@JuanPortalG]

Thank uuu 🙌🏽

[@sharminoomatia]

You're welcome!!

[@OmosanyaKanyinsola]

Please it not working for iOs I mean when I checked the page on iPhone it does not work how can I modify it please help I have tried several ways

[@tahrimabanna6045]

please make a playlist or js ,nodejs .

[@mylife9700]

thank you very much

[@logicodez8530]

Thank you.

[@ianxven]

thank you for sharing

[@sharminoomatia]

You're welcome!

[@NARENDERKUMAR-uq7dm]

how can we do it in react js

[@traveldiaries9597]

Best of luck for. Your channel, I was stuck and now. I am not

[@unnatshaneshwar6477]

it would be much efficient to use Intersection Observer API instead of using a scroll even listener

[@nghiadinh6215]

thank you veryyyyy muchhhh

[@rasvinshihas111]

thanks life saver 🥺🥺🥺 (not fun)

[@sharminoomatia]

Glad it helped

[@mac1aj]

Why is it not working for me?

[@sharminoomatia]

Redo following the video, maybe you might have missed something

[@hardik8245]

Jai shree ram 💗

[@mohamedrafikbonadeur]

merci madame

[@YashSharma20bcs107]

const output=people.reduce((acc,curr)=>{
if(curr.age

[@karimobaid6311]

Thank you❤❤❤❤

[@BeFearlesshiva]

Thank you 😊

[@mohammedahmed8823]

thank you.