Badass Images - A demo of the sticky effet in CSS

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

sticky

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 :+1:

You need to remove the rule overflow-y: auto from your .article class.

image

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 :+1:

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 :grimacing: ).

But once again, thank you for the explanation, that helps clearing things out !!

1 Like