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!
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.
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.
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)
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".
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.
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.
Such a good series!!! Thank you for your hard work!
A thousand thanks to you Web Dev Simplified :)
You are very welcome x1000.
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.
dude your contents are forever. great job
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!
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.
I really do like these short, digestable videos where possible.
Thanks for the explanation,, it was great! I was so confused until now.
Thank you very much for providing these videos!
Thank you for sharing such knowledge
Great explanation of position: sticky! I really like your CSS content!
Thanks! I love CSS.
Great tutorials. Well explained and going straight away to the point.
thank you for this video, it's really clarified some unknowns for me
really recommend this channel. he did extraordinary works!
Thanks a lot. Love your videos.
Great explanations, and the details of how sticky works! Thanks for the comprehensive video.
Clear Explanation !! Thanks a lot
Thank you so much, this video made my day ❤️
One best sticky simple video I searched lot I got this is the best
The example you have provided is extremely useful for teaching this concept, awesome
Vert informative video to understand sticky position. Well done.
Obrigado amigo, ajudou muito.
Ganhou mais um inscrito.
What about thank him in his language?
@@ed1nh0 😂😂😂
Full of awesomeness. You are a great tutor. Bless You.
Finally, I've understood the concept of sticky position.
My warmest thanks ❤❤
Great, very practical video, keep them coming!
Will do. Thanks for the feedback!
Great explaination!
Thanks for making it simple 🤗
Thank you so much for this wonderful tutorial it helps a lot
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!
made me fall in love!! ty!
Thank you for this video. It’s really precisely helpful
Short, concise videos are the best!
Best example how and why to use sticky! Great stuff!
Great video! Thanks.
Thanks again buddy👍
What a precise explanation !
Thanks mate; I only knew how to do stiky on excel, now html. I am using that on my current mid term project.
Thanks brother, you helped me!
Super helpful, incredibly simple and easy to understand.
how .header-large gave that image in the body even if the div isn't styled in css or style
Very well explained. Thank you!
You're welcome.
Thanks a lot sir ❤
You're really a fantastic teacher. Keep it up!
super useful - I was doing this for years using javascript :) ...
Great vid man , subed
So well explained
you've save my life.
thanks a lot, now I know what is @supports used for, explain more such CSS tips.
Really u r super 👍., No words to say ur teaching., Keep rocking bro 👍
Thank you so much!
You are very welcome!
Great .. easy.. awesome explanation :)
Thankyou very much .
Beautiful n clean
Surely I enjoyed very much.❤
1:43 Where this image come from though ?
Thank you so much
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😄
very useful thanks
Position: sticky look professional the way you have the header and then the navbar. I enjoyed this video.
nice
didactic, thank you!!!
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.
Using the workarounds to make sticky work on browsers really feels like "Oh, you don't support sticky? Just support it lol"
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!
Simple and clean
Absolutely gold
its a great explanation of position:sticky. Thanks
DO you know any resources/templates for practice to become a professional web designer
You're the truth 👍
Thanks!
🎉 game changer !
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.
Please make a video for display elements.
Really helpful
Thanks :D
i didnt know about @support :+1 for it!
Thx bhai
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.
Thanks
Can I use this sticky position on a tag?
thank you
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)
How did the image appeared in the heading just by adding the
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".
Very useful
Lol....I used to use JavaScript for this simple stuff thanks very much for sharing
Hello Kyle, can you make a video on xpath with html, css and javascript demo project? Thanks
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...
How do you stop this from bleeding into your footer? (ie. part of a sidebar?)
Wow, was about to use JQuery for this simple task as I'm noob. But this saved me.
thanks
How does class header- large inside div produces an image ..
I'm confused! Help me!!!😓
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.
Oh, that's what I hated about web dev -- browser support headache!
Btw, what IDE are you using? Is it VS Code?
Excellent explanation. Thanks.
{2021-05-28 09:56}