Sticky Navbar on Scroll With CSS | Change Navbar Color on Scroll With Javascript

No video

Sticky Navbar on Scroll With CSS | Change Navbar Color on Scroll With Javascript

Рет қаралды 48,492

Күн бұрын

🎥🔥 NEW VIDEO UPDATE: Website With Sticky Nav & Logo Animation: • Website With Sticky Na...
💻 Get the Source Code and support the channel ❤️: www.buymeacoff...
⬇️ LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW) 😉💪 ⬇️
💻 My Source Codes: www.buymeacoff...
☕ Buy me a coffee: www.buymeacoff...
😍 One-off donation: www.paypal.me/...
SKILLSHARE
(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)
🔗 skillshare.eqc... (Affiliate)
COURSERA WEB DEVELOPMENT
(Full Stack, Front-End, Back-End, Web Design and a lot more):
🔗 imp.i384100.ne... (Affiliate)
DATACAMP
(Python, ChatGPT, SQL, Power BI, and more)
🔗 datacamp.pxf.i... (Affiliate)
COURSERA PYTHON
(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):
🔗 imp.i384100.ne... (Affiliate)
Learn how to create a fixed navbar on scroll using css and change its color using javascript.
🎥 Web Dev Playlist: • 💻 Web Development Play...
If the video was helpful, let me know in the comments down below and also like the video so that other people can see it. Needles to say I really appreciate your support 💪❤️
📨 SUBSCRIBE so that you don't miss any new video:
www.youtube.co...
🤗 BIO PAGE (contacts, etc): solo.to/fabiom...
Create Your Bio Page (10% OFF Upgraded Plans 😉): solo.to/inv/ND...
🔗 RELATED CONTENT (videos, playlists, etc) 🔗
Web Dev Playlist: • 💻 Web Development Play...
🤩 AFFILIATE LINKS 🤩
Create Your Bio Page (10% OFF Upgraded Plans): solo.to/inv/ND...
🧑🏻‍💻 ABOUT ME 🧑🏻‍💻
I'm Fabio, I started programming with Python a lot of years ago and I fell in love with this world.
I started this KZfaq channel to help you during your own journey and I hope that my help can make you an amazing programmer who loves this world as I do.
Welcome on board!! 🚀
#webDevWithFabioMusanni #css #webdevelopment #webdev #css3 #csstutorial

Пікірлер: 70

@FabioMusanni Жыл бұрын

🎥🔥 *NEW VIDEO UPDATE:* Website With Sticky Nav & Logo Animation: kzfaq.info/get/bejne/gMyemqijy73Yo3U.html 💻 *Source Code New Video Update:* www.buymeacoffee.com/fabiomusanni/e/182832 ⬇️ *LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW)* 😉💪 ⬇️ ☕ *Buy me a coffee:* www.buymeacoffee.com/fabiomusanni ❤️ *Support me monthly:* www.patreon.com/FabioMusanni 😍 *One-off donation:* www.paypal.me/FabioMusanni/ *SKILLSHARE* _(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)_ 🔗 skillshare.eqcm.net/5gxzD2 (Affiliate) *COURSERA WEB DEVELOPMENT* _(Full Stack, Front-End, Back-End, Web Design and a lot more):_ 🔗 imp.i384100.net/EKWxBW (Affiliate) *DATACAMP* _(Python, ChatGPT, SQL, Power BI, and more)_ 🔗 datacamp.pxf.io/vN1bDj (Affiliate) *COURSERA PYTHON* _(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):_ 🔗 imp.i384100.net/k0Nk60 (Affiliate) Thank you for the support!❤ 🎥All my videos about web dev: kzfaq.info/sun/PLs8qUrmRvaR3_p-UwLFvQ2NySkORSYUiB

@drmatiasE Жыл бұрын

Genius! 1000 thumbs up.. clear.. to the point.. perfect outcome... EXTREMELY appreciated..

@FabioMusanni Жыл бұрын

Thank you so much for the comment! 😍 Glad the video helped! 💪😎

@dylan_kwok Жыл бұрын

Thanks for explaining step by step! Really appreciated hearing your explanations as I worked😁

@FabioMusanni Жыл бұрын

Thanks for the comment! I'm glad you liked the explanation! 😍 I always try to explain things as much as I can because I want people to actually understand what I'm doing 😉 💪

@Rhc9ps 6 күн бұрын

Thanks a lot. It really helped. 😎

@widya2550 Жыл бұрын

Works perfectly, I convert it to React btw. Well done sir, bookmarked on my playlist and subscribed :D

@FabioMusanni Жыл бұрын

Thank you for the comment 💪🤗 Good idea, you can create a nice React component 😉

@cam_json Жыл бұрын

thank you king. was about to quit programming and go back to the amazon warehouse.

@FabioMusanni Жыл бұрын

Hey Cameron! Thank you for the comment! 😊Programming is not easy, especially at the beginning, but then it gets easier. It's always going to be challenging, don't get me wrong, but in a different way, so don't give up! 💪😉

@ganesha123100 5 ай бұрын

Perfect and nicely explained. The tone of voice is very helpful as well. Thanks 🙂

@FabioMusanni 5 ай бұрын

Thank you for the comment Raj! Really appreciated! 🙏🏻🤗 If you are interested you can find the source code of my videos and support the channel here: www.buymeacoffee.com/fabiomusanni

@dakhaniusman9644 9 күн бұрын

thanks a lot man

@ferasfayad3430 Жыл бұрын

Thank you helped me

@FabioMusanni Жыл бұрын

Hello Faras. Thank you for the comment and I'm glad the video was helpful! 💪🤩

@namanjain2844 Жыл бұрын

this solved my problem thank you 🙏🔥

@FabioMusanni Жыл бұрын

Hey! Thank you very much for the comment!! 😉🔥

@alexubokwe7933 Ай бұрын

Thank you so much

@FabioMusanni 25 күн бұрын

Glad you found this helpful! 💪😍

@reylancuervo2991 10 ай бұрын

Thanks I learn new today❤❤

@FabioMusanni 10 ай бұрын

Hello, thank you so much for the comment! 😍❤ I've just released a video Update, where I show you how to create a simple website with sticky navbar and also a cool logo animation on scroll. If you want to check that out, here's the link: kzfaq.info/get/bejne/gMyemqijy73Yo3U.html 💪💪

@daminduavishka9047 Жыл бұрын

Thank you helped me a lot ♥

@FabioMusanni Жыл бұрын

Thank you very much for the comment! ❤️

@abdulbasit1540 3 ай бұрын

Thanks man

@FabioMusanni 3 ай бұрын

Glad it was helpful! 💪😍

@jcruzstrak8239 Жыл бұрын

Thank you man

@FabioMusanni Жыл бұрын

Thank you for the comment man! Really appreciated! 💪😎

@user-qn7zx4ml5p 8 ай бұрын

감사합니다 thank you ❤

@FabioMusanni 8 ай бұрын

천만에요 🤗 (hopefully that's correct 😁)

@L_6. 3 ай бұрын

thank you a lot

@FabioMusanni 3 ай бұрын

Thank you for the comment!! 😊💪

@_playreallyloud Жыл бұрын

Love You bro)) it works😍

@FabioMusanni Жыл бұрын

Of course it does 😉 Thank you for the comment bro! 😍🤗

@peterkabiru5144 Жыл бұрын

Well Explained👍

@FabioMusanni Жыл бұрын

Thank you for the comment! 🤗 I'm glad you found it useful 💪😎

@ToonBlissAnimation 11 ай бұрын

I have a problem with transitioning color because instead of using head.scrolled I use .head.scrolled in css, will that affect the output of transitioning?

@FabioMusanni 11 ай бұрын

Hello 😊 It's actually "header" and not "head". Of course it depends on what you are doing, if you are using an element with the class "head", then of course you can use ".head.scrolled". As I said it just depends on the elements and classes that you are using 😊

@magwiiz Ай бұрын

Thanky You My Hero

@petrmyjsaros2784 Жыл бұрын

Thank you for posting this video, you helped me a lot.

@FabioMusanni Жыл бұрын

No worries! Glad it was helpful and thank you for the comment 🥰💪

@olorunfemiadewale9020 Жыл бұрын

Unfortunately.. the code for scroll works but does not change the nav bar background color.. onscrollY, in the inspect panel.. it shows active. But does not change the background

@FabioMusanni Жыл бұрын

Hello 😊 The only thing I can think of is that in the css you wrote "header .scrolled" with a space between "header" and ".scrolled" and and not "header.scrolled".

@olorunfemiadewale9020 Жыл бұрын

@@FabioMusanni wow.. that was correct.. i had space in between them.. and on the script i added .scrolled.. i never thought that could affect it.. i had been fighting with this for 4days now until i decided to comment here.. i searched all stackgit.. nothing 😂😂 thanks a mill bruv

@FabioMusanni Жыл бұрын

@@olorunfemiadewale9020 That's great!! 💪🤩 If you write something like "header .scrolled" (with the space), it means "apply this style to all the elements with the class .scrolled that are also children of the header element". On the other hand, if you write "header.scrolled", it means "apply this style to the header element when it has the class .scrolled". I hope this clarifies why the space was affecting the result 😊😉

@DanteTaylor 5 ай бұрын

@@FabioMusanni Thank you so much! Had the same mistake, you're so nice for helping us out. You won another follower.

@FabioMusanni 5 ай бұрын

@@DanteTaylor That's great! 💪 Glad I could help! 😍🤗

@djelal_ 7 ай бұрын

perfect

@FabioMusanni 7 ай бұрын

Thank you for the comment! 💪😊

@bdhanunjaya7447 5 ай бұрын

Thank you sir ❤

@FabioMusanni 5 ай бұрын

Thank you for the comment! ❤ Appreciated!🙏🏻💪

@mahtab_sudip 9 ай бұрын

Thanks dude

@FabioMusanni 9 ай бұрын

Thanks for the comment! 💪

@ChromaticaCitizen 5 ай бұрын

When I did the position fixed in my header, the header bar shorted by. A lot 😭

@FabioMusanni 5 ай бұрын

If you watch the whole video there is also another solution to use that doesn't use fixed. 😊

@subhajeetmukherjee1189 10 ай бұрын

why am i able to give only one like to this video??

@FabioMusanni 10 ай бұрын

Ahah, don't know, maybe they should enable the double-like 😂Jokes aside, thank you so much for the comment! 😍 Really appreciated! Btw, I'm actually going to publish an update of this video on Wednesday, stay tuned because it's going to be so cool! 💪😍

@emanuelnolasco6285 Жыл бұрын

It is possible to use it with a header with position: fixed ? Because I've tried to do that but is not working

@FabioMusanni Жыл бұрын

I actually used "position: fixed" in the first example.

@konantj Жыл бұрын

what does it mean 5em'

@FabioMusanni Жыл бұрын

Instead of using px, you can use other units. In this case em is a unit relative to the font-size of the element, which means that if your font-size is 16px, 5em is 80px. So if you increase the font-size of the element, automatically the value of 5em will change accordingly. It could be harder to use them at first but then you can take advantage of those units to do interesting things. 😊

@epoch1414 Жыл бұрын

My code possesses a black boarder around the left and right sides of the view :(

@FabioMusanni Жыл бұрын

Hey 😊 Make sure you set the body's margin to 0.

@epoch1414 Жыл бұрын

@@FabioMusanni Thank you!!!

@younes-47 Жыл бұрын

sticky doesn't make my nav fixed don't know why

@FabioMusanni Жыл бұрын

Did you follow the exact same steps? If so, make sure you wrote everything correctly (e.g. div.class is different from div .class).

@younes-47 Жыл бұрын

@@FabioMusanni thank you very much, i found out that i was missing the top: 0 rule. But a problem aroused. the nav bar doesn't go above the boxes with dropshadow effect. I mean when i scroll, all the divs and imgs with dropshadow effects goes above the nav covering it...

@FabioMusanni Жыл бұрын

@@younes-47 That could be something to do with z-index. Probably for some reason the divs are above the nav in the stacking context. Try to play with the z-index to see if you can find a solution. Remember that the z-index only works in certain situations, like for positioned elements and so on.

@Howimetyourmother-fp5ve 2 ай бұрын

it is not working

@ter753 Жыл бұрын

source code¿?

@FabioMusanni Жыл бұрын

Hello 😊 You can request the source code by becoming a Level 2 member of my Patreon. Here's the link, if you want to check it out: www.patreon.com/FabioMusanni 😎💪