Project URL: https://badassimages.glitch.me/
Badass Images is a demostration of position: sticky; CSS rule. This is based on this MDN document.
4 Likes
Hello, may i ask you something?
Im recently using glitch and i ran into a problem, so i have been trying to use the “position: sticky;” but it does not seem to take any effect in the css file. Can you tell me what is possibly wrong with it ? thanks
Hi @Nam_Tran, welcome!
Can you share the name of your Glitch project?
Your CSS looks ok. Are you sure there’s enough content on the page for it to scroll?
Hi @SteGriff, thanks for the reply.
My project’s name is “tiennam-tran”, hope you dont get any difficulties finding it.
Actually i just started to learn about web designing stuffs for 2 weeks so still many things to learn, hope you dont mind about the messy code xD
Thanks for sharing! Well done with your website 
You need to remove the rule overflow-y: auto from your .article class.
This is a weird CSS quirk (the first of many you will discover). I don’t totally understand the reason, but it’s like the browser thinks “this sticky element is inside something that could have its own scroll bar, so I don’t need to stick it yet…”
One mention of the problem is here: Dealing with overflow and position: sticky; | CSS-Tricks
After I changed this in DevTools, your header works like expected
Hope it helps!!
Thanks @SteGriff, i understand it now.
And the overflow-y: auto, i forgot to comment it out while i was trying to do the scroll snapping pages, obviously it didn’t work as well (and i dont know why 
).
But once again, thank you for the explanation, that helps clearing things out !!
1 Like
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.