Skip to main content
Skip to video
Skip to article

5 Reasons your CSS Sticky Position won’t work

CSS, tips
2,408 views

Sticky positioning is a popular CSS property that is used to keep an element in a fixed position while the rest of the page scrolls. However, sometimes the sticky position just doesn’t seem to work as expected. In this post, we’re going to cover five reasons why your sticky position may not be working.

Sticky Position Not Working? Here Are 5 Reasons Why

No threshold specified

A sticky element requires a threshold to be specified in order for it to work. The threshold specifies the distance between the sticky element and the top, bottom, left, or right of its containing element. For example, if you want an element to stick to the top of its containing element, you need to set a threshold of a certain number of pixels from the top. If no threshold is specified, the element will not stick. e.g.

/* this adds a 5px threshold to the top position of the sticky element */
.selector {
position: sticky;
top: 5px 
}

Ancestor has an overflow property

If an overflow property is set on any of the ancestors of the sticky element (the parent or grandparent etc.), the sticky position will not work. It doesn’t matter what value you set for the overflow property, as long as it is set, the sticky position will not work.

Sticky container is a flex item or grid item with align-items set to stretch

If the sticky container is a flex item or grid item with align-items set to stretch, the sticky position will not work. This is because all the items are stretched from the beginning to the end, and there is not enough room for the sticky element to stretch.

Sticky element does not have enough room to stick

If the sticky element does not have enough room to stick, it will not work. This can happen if the parent has no height or if the height of the parent is the same as the sticky element. The sticky element typically sticks within the height of its container.

Missing vendor prefix

Finally, if a vendor prefix is missing, the sticky position may not work. For example, from Safari 13 and below, you need to add a prefix to the property value for it to work. If your sticky position is working in some browsers but not others, make sure you check for missing vendor prefixes. E.g.

/* this adds vendor prefix -webkit-sticky */
.selector {
position: sticky;
position: -webkit-sticky;
top: 5px 
}

In conclusion, sticky positioning can be a powerful tool for keeping elements in place while scrolling. However, if your sticky position isn’t working as expected, one of these five reasons could be the culprit. Make sure you double-check your code and see if any of these issues apply to your situation.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!
4.5 2 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Leave a Reply

Your email address will not be published. Required fields are marked *

dicecartselectearthcrossarrow-rightlayerstext-align-center
0
Would love your thoughts, please comment.x
()
x