If “position: sticky” doesn’t work in CSS

Use of “position: sticky”

A very useful position: sticky that sticks a specific element to the screen in conjunction with scrolling.

Previously, the only way to express it was to use “position: fixed” and javascript, but now that the sticky attribute has been added, it has become very convenient! !

If you use this, you can apply it in a variety of places, such as headers that follow when scrolling, and banners in side menus.

If you don’t get it, scroll through the sample below and you’ll see how it works.
(If you’re reading this article, I’m sure you don’t understand. (LOL))

See the Pen
sticky01 by Bong yiroon (@boltmanber)
on CodePen.

One thing to keep in mind in the above sample is that elements with sticky attributes are applicable only within their own parent element.
If you want to apply it throughout the page, you need to place it as a child element directly under the tag that wraps the entire page, like the body tag.

See the Pen
sticky02 by Bong yiroon (@boltmanber)
on CodePen.

I often see blogs on the internet that say “If the element to which sticky is applied is the only child element, it will not work properly”, but this is incorrect. Even if it is the only child element, it will work within the parent element’s height if it has enough height.

See the Pen
sticky03 by Bong yiroon (@boltmanber)
on CodePen.

Precautions when using

Any parent element of the sticky element (even if it’s not the immediate parent) has overflow: auto, overflow: hidden, or overflow: scroll< /em> is applied, sticky has no effect.

See the Pen
sticky04 by Bong yiroon (@boltmanber)
on CodePen.

This is what happens when sticky doesn’t work.

how was it?
Create a wonderful homepage using sticky!

Click here for sticky supported browsers.
https://caniuse.com/#feat=css-sticky

ie11. . .I hope they will be wiped out soon. . .

커피 한 잔의 사랑을! 창작활동에 큰 도움이 됩니다.

Buy me a coffee