Just a note on why I used @supports at the end of the video. If a browser does not support position: sticky it will fallback to position: static instead of position: relative which will make any absolute positioned elements inside the sticky positioned element no longer work properly.
Although this video is like 3 years old, it helped me a lot. I was in a desperate moment on how to make my navbar fixed but somehow still relatively positioned according to other elements. The first example in this video is EXACTLY what I was looking for for the past one week. Thank you very much!!
Thank you for this video. I've been learning nav bars and I had the same problem you talked about when using Fixed, where the elements below the navbar get bumped up. I didn't know if this is how people were doing it, but I used Fixed because I only know about Fixed+Relative+Absolute. Now, I know to use Sticky, instead. 👍
Sticky is so much nicer to work with than fixed. I hate having to add margins to my content when using fixed because it just doesn't seem right. Just make sure that you check to see if the browser supports sticky position using @supports because it isn't supported in all browsers yet.
For sure; that's probably one of the reasons I hadn't heard of it before (even though 90% browser support with prefixes sounds pretty good. IMO). BTW, have you done a video on an image slideshow w/ autoplay + pause + left / right arrows? I'm gonna check right now, but figure I'd include it in this comment instead of messaging you twice.
Yeh 90% really is pretty good. I thought it was around 80 for some reason. As for the image slider, I have not done a video on that topic but there are tons of videos about that so you should be able to find a good one.
Thanks for the feedback. I was trying something different with the title and thumbnail to see how it works. I'm always trying to experiment to find the best way to do things.
I would like to repeat the same thing as @TechUchiha said "Simple, Precise and to the point" 👍. Great Job, Keep it up :) I am not from the coding background but this made me very clear regarding my doubt. Thanks!
Excellent video! Thanks for posting! Can this be used to make items stick on the left too? I'm thinking of spreadsheet-style columns that stay on the left as you scroll across.
Sticky act with respecting the parent's relative position, while fixed don't care about parent's relative position and directly jump to the top most position of the page.
When I am using position: sticky element stack up on each other and then, I am using background-color: transparent last one is visible. But in the video he said " it no longer remain fixed".
Question: Why do you use the style tag instead of a separate CSS file? Wouldn't that violate separation of concerns? Is it more for tutorial sake so that you aren't flipping between files constantly while explaining and demonstrating your examples? (Which would make sense if that were the case)
You said that sticky falls back to relative when not supported by the browser so then why to we need to use that @support part when it will automatically become relative anyways if not supported by the browser ?
This is because by default elements are static position so if it falls back to relative position you could get some weird bugs where the top/left/right/bottom values you specify on the element cause it to perform strangely in non-supported browsers.
Just a note on why I used @supports at the end of the video. If a browser does not support position: sticky it will fallback to position: static instead of position: relative which will make any absolute positioned elements inside the sticky positioned element no longer work properly.
Why do you hide codes😡??
Although this video is like 3 years old, it helped me a lot. I was in a desperate moment on how to make my navbar fixed but somehow still relatively positioned according to other elements. The first example in this video is EXACTLY what I was looking for for the past one week. Thank you very much!!
Simple, Precise and to the point ✌🏻
just learning html and this vid was godsent. I hope everyone starting out can watch your videos
I'm really glad I could help!
literally everything is godsent
Thank you for this video. I've been learning nav bars and I had the same problem you talked about when using Fixed, where the elements below the navbar get bumped up. I didn't know if this is how people were doing it, but I used Fixed because I only know about Fixed+Relative+Absolute. Now, I know to use Sticky, instead. 👍
Sticky is so much nicer to work with than fixed. I hate having to add margins to my content when using fixed because it just doesn't seem right. Just make sure that you check to see if the browser supports sticky position using @supports because it isn't supported in all browsers yet.
For sure; that's probably one of the reasons I hadn't heard of it before (even though 90% browser support with prefixes sounds pretty good. IMO). BTW, have you done a video on an image slideshow w/ autoplay + pause + left / right arrows? I'm gonna check right now, but figure I'd include it in this comment instead of messaging you twice.
Yeh 90% really is pretty good. I thought it was around 80 for some reason. As for the image slider, I have not done a video on that topic but there are tons of videos about that so you should be able to find a good one.
This is the best description and instructions on how to use Sticky Position in almost all browsers I have seen.
Finally, I've understood the concept of sticky position.
My warmest thanks ❤❤
This is super cool, and much simpler than I thought it would be. This channel is gold for a noob like me. Thank you for your videos!
Thank you so much for this. I've been struggling to do this in JavaScript. This is simple yet super helpful. You saved me. Thank you so much.
A thousand thanks to you Web Dev Simplified :)
You are very welcome x1000.
I have found yet another genius. Thanks for this content and many others that have helped me understand some #WebDevelopment concepts better.
You're welcome! I am glad I could help.
dude your contents are forever. great job
I really do like these short, digestable videos where possible.
Brilliant, love the sticky list headers. I will be using this method next time someone wants a sticky bar, instead of having to mess around with JS!
The example you have provided is extremely useful for teaching this concept, awesome
Such a good series!!! Thank you for your hard work!
One best sticky simple video I searched lot I got this is the best
super useful - I was doing this for years using javascript :) ...
Great explanation of position: sticky! I really like your CSS content!
Thanks! I love CSS.
thanks a lot, now I know what is @supports used for, explain more such CSS tips.
Thanks for the explanation,, it was great! I was so confused until now.
thank you for this video, it's really clarified some unknowns for me
Best example how and why to use sticky! Great stuff!
Thanks mate; I only knew how to do stiky on excel, now html. I am using that on my current mid term project.
Position: sticky look professional the way you have the header and then the navbar. I enjoyed this video.
Short, concise videos are the best!
really recommend this channel. he did extraordinary works!
Great explanations, and the details of how sticky works! Thanks for the comprehensive video.
Full of awesomeness. You are a great tutor. Bless You.
Vert informative video to understand sticky position. Well done.
Great tutorial! You might want to include the word "sticky" in the video title for SEO purposes :)
Thanks for the feedback. I was trying something different with the title and thumbnail to see how it works. I'm always trying to experiment to find the best way to do things.
Thank you very much for providing these videos!
Really u r super 👍., No words to say ur teaching., Keep rocking bro 👍
Great tutorials. Well explained and going straight away to the point.
I would like to repeat the same thing as @TechUchiha said "Simple, Precise and to the point" 👍. Great Job, Keep it up :)
I am not from the coding background but this made me very clear regarding my doubt. Thanks!
Great, very practical video, keep them coming!
Will do. Thanks for the feedback!
Super helpful, incredibly simple and easy to understand.
Thank you so much for this wonderful tutorial it helps a lot
You're really a fantastic teacher. Keep it up!
Thank you so much, this video made my day ❤️
Thank you for this video. It’s really precisely helpful
Thanks for making it simple 🤗
Thank you for sharing such knowledge
Clear Explanation !! Thanks a lot
you've save my life.
What a precise explanation !
its a great explanation of position:sticky. Thanks
DO you know any resources/templates for practice to become a professional web designer
made me fall in love!! ty!
Thanks brother, you helped me!
Very well explained. Thank you!
You're welcome.
So well explained
Obrigado amigo, ajudou muito.
Ganhou mais um inscrito.
What about thank him in his language?
@@ed1nh0 😂😂😂
Great explaination!
Thanks a lot. Love your videos.
Please make a video for display elements.
how .header-large gave that image in the body even if the div isn't styled in css or style
Wow, was about to use JQuery for this simple task as I'm noob. But this saved me.
i didnt know about @support :+1 for it!
Lol....I used to use JavaScript for this simple stuff thanks very much for sharing
Thanks again buddy👍
nice video...glad to see it😄 ... now i know more about sticky position. thank you kyle✌
Thanks for giving me the idea for the video!
@@WebDevSimplified no problem... I will wait for the next video😁
@@parasarora5869 it will be out in just over 24 hours.
@@WebDevSimplifiedI will definitely see that...thanks for info😄
Excellent video! Thanks for posting! Can this be used to make items stick on the left too? I'm thinking of spreadsheet-style columns that stay on the left as you scroll across.
Surely I enjoyed very much.❤
Great video! Thanks.
the best teacher ever
Absolutely gold
Simple and clean
Using the workarounds to make sticky work on browsers really feels like "Oh, you don't support sticky? Just support it lol"
Great vid man , subed
Great .. easy.. awesome explanation :)
Sticky act with respecting the parent's relative position, while fixed don't care about parent's relative position and directly jump to the top most position of the page.
Thank you so much!
You are very welcome!
When I am using position: sticky element stack up on each other and then, I am using background-color: transparent last one is visible. But in the video he said " it no longer remain fixed".
Question: Why do you use the style tag instead of a separate CSS file? Wouldn't that violate separation of concerns? Is it more for tutorial sake so that you aren't flipping between files constantly while explaining and demonstrating your examples? (Which would make sense if that were the case)
Thanks a lot sir ❤
Thankyou very much .
Hello Kyle, can you make a video on xpath with html, css and javascript demo project? Thanks
Mashallah, Best RUclipsr Ever
Thanks
Thank you so much
How does class header- large inside div produces an image ..
I'm confused! Help me!!!😓
Beautiful n clean
I look for Kyle (Web Dev Simplified) whenever I have a coding question.
Can I use this sticky position on a tag?
very useful thanks
Thank you
You said that sticky falls back to relative when not supported by the browser so then why to we need to use that @support part when it will automatically become relative anyways if not supported by the browser ?
This is because by default elements are static position so if it falls back to relative position you could get some weird bugs where the top/left/right/bottom values you specify on the element cause it to perform strangely in non-supported browsers.
1:43 Where this image come from though ?
How did the image appeared in the heading just by adding the
🎉 game changer !
Please show ALL the cases where sticky doesn't work.
Can't get it to work on my website and forced to use intersection observer instead...
thank you
Thanks!
You're the G.O.A.T!
How do you stop this from bleeding into your footer? (ie. part of a sidebar?)
postion: sticky and overflow:hidden not working in nested table
nice
didactic, thank you!!!
thanks
You're the truth 👍
Thanks :D