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!
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.
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.
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.
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".
