No video

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

  Рет қаралды 24,706

Sharmin Oomatia

Sharmin Oomatia

Күн бұрын

If you didn't understand anything in the video, feel free to leave a comment below and I'll answer all your questions.
Codepen link: codepen.io/Sha...
Find me here:
Instagram : / _sharmin_o
Facebook : / sharminoomatia
Twitter : / soomatia

Пікірлер: 99
@philipmwangi5270
@philipmwangi5270 2 жыл бұрын
Trust me, your explanation is really awesome. Keep making content.
@sharminoomatia
@sharminoomatia 2 жыл бұрын
Sure, thank you so much!
@jessicawailes4938
@jessicawailes4938 2 жыл бұрын
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
@sharminoomatia Жыл бұрын
I'm glad! :)
@HelloCostello
@HelloCostello 5 ай бұрын
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
@sharminoomatia 5 ай бұрын
I am glad this helped you, thank you so much for all your kind words 🙌
@traveldiaries9597
@traveldiaries9597 2 жыл бұрын
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
@sharminoomatia 2 жыл бұрын
I'm glad, it helped you!! Thank you so much!
@Mostafa-jh2ij
@Mostafa-jh2ij 3 ай бұрын
I really appreciate you and this wonderful video! Myself being a beginner, you actually helped me a lot!
@sharminoomatia
@sharminoomatia 3 ай бұрын
I am glad 😊
@steevenjackson667
@steevenjackson667 2 жыл бұрын
Wow! Good explanation ! I was looking for a solution for 1 hour before I came across your video. Thank you so much.
@aaronkenney_17
@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.
@juliberk
@juliberk 7 ай бұрын
Thank you so much for doing this tutorial. It was extremely helpful 🤗
@sharminoomatia
@sharminoomatia 7 ай бұрын
Thank you so much!! You can check my other videos as well 😁
@alexismanzano752
@alexismanzano752 Жыл бұрын
this is without a doubt, the easiest way to do it. fantastic job thank you so much!!
@sharminoomatia
@sharminoomatia Жыл бұрын
Thank you!
@Jayakumar-uq1tv
@Jayakumar-uq1tv 8 ай бұрын
good explanation, and very usefull💯
@sanskargupta407
@sanskargupta407 3 ай бұрын
well explained , thanks for the video
@MartinExequielFuraca
@MartinExequielFuraca Жыл бұрын
This was absolutely helpful, i really appreciate it! Thank you so much, keep up the good work! Greetings from Argentina!
@mahtab_sudip
@mahtab_sudip 9 ай бұрын
Thanks!!! Keep going to success in youtube.
@sharminoomatia
@sharminoomatia 9 ай бұрын
Thank you!
@pankajmaru9464
@pankajmaru9464 11 ай бұрын
Thank you so much, ma'am. The way you explained is superb. 👍
@youtubebaba9287
@youtubebaba9287 2 жыл бұрын
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 😋
@medblack4548
@medblack4548 2 жыл бұрын
I was struggling with that , thank you .
@sharminoomatia
@sharminoomatia 2 жыл бұрын
I'm glad, thanksss!
@youtubebaba9287
@youtubebaba9287 2 жыл бұрын
Looking for some more cool stuff like this...freshers like me are eager to learn.
@RajibAhmad
@RajibAhmad 8 ай бұрын
salam sister.... very good tutorial... please keep up the good work :)
@sharminoomatia
@sharminoomatia 8 ай бұрын
Thank you!
@chadcaballero1626
@chadcaballero1626 10 ай бұрын
Nice explanation! Thank you for sharing.
@stoyansarov2647
@stoyansarov2647 Жыл бұрын
Thank you. Very nice explanation and straight to the point.
@Nahid_hasan1010
@Nahid_hasan1010 10 ай бұрын
it was very very helpful
@356_sybmsa_nabaoomatia2
@356_sybmsa_nabaoomatia2 3 жыл бұрын
Wow! Good explanation 👍🏻 keep it up☺️
@sharminoomatia
@sharminoomatia 3 жыл бұрын
Thanks 😊❤️
@bhojaksmith
@bhojaksmith Жыл бұрын
Was looking for exactly this and it works well ! Thank you :)
@reket777pvl
@reket777pvl 9 ай бұрын
Alhamdullilah thanks for your tutorial sister
@AlexIvanov-uh1yz
@AlexIvanov-uh1yz 2 жыл бұрын
thx very good explained
@oscardiaz3968
@oscardiaz3968 3 жыл бұрын
Just what I was looking for. Thanks a lot!
@sharminoomatia
@sharminoomatia 3 жыл бұрын
You're welcome!!
@lucas6845
@lucas6845 Жыл бұрын
Thank you so much, you just save me.
@sharminoomatia
@sharminoomatia Жыл бұрын
I'm glad!
@sajedulislam5341
@sajedulislam5341 Жыл бұрын
awesome
@tcrdev
@tcrdev 2 жыл бұрын
it was quite helpfull, you made it clear and easy...
@sharminoomatia
@sharminoomatia 2 жыл бұрын
Thank you!
@CarlosRamirez-re9mp
@CarlosRamirez-re9mp 2 жыл бұрын
Than u, keep it up!
@eric31022
@eric31022 2 жыл бұрын
Hey liked the video. Can you make more JavaScript for beginners videos
@sharminoomatia
@sharminoomatia 2 жыл бұрын
Sure, thank you so much!!
@anastasiia7345
@anastasiia7345 2 жыл бұрын
Very helpful, thank you!!
@karimobaid6311
@karimobaid6311 3 ай бұрын
Thank you❤❤❤❤
@imade6707
@imade6707 Жыл бұрын
Thank you !
@sargisdavtyan6676
@sargisdavtyan6676 2 жыл бұрын
thank you so much👍👍
@SonuYadav-pw1rz
@SonuYadav-pw1rz 3 жыл бұрын
Excellent 👍
@sharminoomatia
@sharminoomatia 3 жыл бұрын
Thank you so much!!😄
@_Rohit_Kumaar
@_Rohit_Kumaar 2 жыл бұрын
Thank You 👍
@FancisReyes
@FancisReyes 2 жыл бұрын
Thanks so much!!!!
@risuday
@risuday Жыл бұрын
thank you ❤
@BeFearlesshiva
@BeFearlesshiva Жыл бұрын
Thank you 😊
@ahmadsalahuddin4570
@ahmadsalahuddin4570 Жыл бұрын
THANK YOUUU!! :D
@mascode1
@mascode1 2 жыл бұрын
This is great sharmin
@mohammedahmed8823
@mohammedahmed8823 Жыл бұрын
thank you.
@sarad.cinanima2704
@sarad.cinanima2704 Жыл бұрын
Grande!
@gokulg6987
@gokulg6987 2 жыл бұрын
Tq so much
@bookwyrm4559
@bookwyrm4559 2 жыл бұрын
Thank you. You are a life saver
@traveldiaries9597
@traveldiaries9597 2 жыл бұрын
Best of luck for. Your channel, I was stuck and now. I am not
@CoolMotivation-shorts
@CoolMotivation-shorts 4 ай бұрын
Nice video 😇
@bellojoseph6838
@bellojoseph6838 Жыл бұрын
This is great
@sharminoomatia
@sharminoomatia Жыл бұрын
Thank you!
@luckyjangir8303
@luckyjangir8303 Жыл бұрын
i hope you grow up faster
@JuanPortalG
@JuanPortalG Жыл бұрын
Thank uuu 🙌🏽
@sharminoomatia
@sharminoomatia Жыл бұрын
You're welcome!!
@grishmitapandey1823
@grishmitapandey1823 3 жыл бұрын
Nice Explanation & very helpful ❣
@sharminoomatia
@sharminoomatia 3 жыл бұрын
Thank you so much ❤️
@adrianojedaf
@adrianojedaf 3 жыл бұрын
Great explanation! Thank you for sharing.
@sharminoomatia
@sharminoomatia 3 жыл бұрын
I'm glad u liked it 😊
@akshayverma1828
@akshayverma1828 Жыл бұрын
Make more videos it was as simple as learning to boil a water.
@sharminoomatia
@sharminoomatia Жыл бұрын
Thank you, I'm glad :)
@sharminoomatia
@sharminoomatia Жыл бұрын
Sure I will!!
@marieemoon
@marieemoon 3 жыл бұрын
Thank u sooo much, your video has helped me a lot!! :3
@sharminoomatia
@sharminoomatia 3 жыл бұрын
You're welcome! I'm glad!
@Irshadmakntojia
@Irshadmakntojia 3 жыл бұрын
Mashallah Allah aapko khub tarakki de Ameen summa Ameen
@sharminoomatia
@sharminoomatia 3 жыл бұрын
Thank you!
@hipo4710
@hipo4710 3 жыл бұрын
how can you add a transition from with color to transparent when scrolling up?
@logicodez8530
@logicodez8530 3 жыл бұрын
Write an else block for scroll value less than the previous one.
@nghiadinh6215
@nghiadinh6215 Жыл бұрын
thank you veryyyyy muchhhh
@logicodez8530
@logicodez8530 3 жыл бұрын
Thank you.
@safiapatel2834
@safiapatel2834 3 жыл бұрын
Thanks for sharing 👌
@sharminoomatia
@sharminoomatia 3 жыл бұрын
You're welcome!
@mohamedrafikbonadeur
@mohamedrafikbonadeur Жыл бұрын
merci madame
@user-ri9dx5il1i
@user-ri9dx5il1i 4 ай бұрын
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
@tahrimabanna6045 Жыл бұрын
please make a playlist or js ,nodejs .
@unnatshaneshwar6477
@unnatshaneshwar6477 2 жыл бұрын
it would be much efficient to use Intersection Observer API instead of using a scroll even listener
@ianxven
@ianxven 3 жыл бұрын
thank you for sharing
@sharminoomatia
@sharminoomatia 3 жыл бұрын
You're welcome!
@hardik8245
@hardik8245 Жыл бұрын
Jai shree ram 💗
@user-ws4kg4zh5l
@user-ws4kg4zh5l Жыл бұрын
const output=people.reduce((acc,curr)=>{ if(curr.age
@NARENDERKUMAR-uq7dm
@NARENDERKUMAR-uq7dm Жыл бұрын
how can we do it in react js
@rasvinshihas111
@rasvinshihas111 Жыл бұрын
thanks life saver 🥺🥺🥺 (not fun)
@sharminoomatia
@sharminoomatia Жыл бұрын
Glad it helped
@mac1aj
@mac1aj Жыл бұрын
Why is it not working for me?
@sharminoomatia
@sharminoomatia Жыл бұрын
Redo following the video, maybe you might have missed something
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 260 М.
Sticky Navbar on Scroll With CSS | Change Navbar Color on Scroll With Javascript
7:36
Fabio Musanni - Programming Channel
Рет қаралды 48 М.
Meet the one boy from the Ronaldo edit in India
00:30
Younes Zarou
Рет қаралды 19 МЛН
Running With Bigger And Bigger Feastables
00:17
MrBeast
Рет қаралды 169 МЛН
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 28 МЛН
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Рет қаралды 470 М.
How to change your navigation style on scroll
13:22
Kevin Powell
Рет қаралды 213 М.
This Simple Trick Makes Your Website 83% Better Looking
10:57
Web Dev Simplified
Рет қаралды 388 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,7 МЛН
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,5 МЛН
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 945 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 168 М.
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,7 МЛН