Sticky CSS

<code readonly="true"> <xmp>.sticky { position: sticky; top: 0; background-color: #0ebac5; color: white; text-transform: capitalize; text-align: center; font-size: 1.2rem; display: grid; place-content: center; } </xmp> </code> </pre> <p>This is sample content to make page longer

The method above only works with parent container has enough height to scroll

.

,

,

,

,

,

,

,

,

,

,

,

,

,

,

,

If you want to make the sticky inside a container but use for whole page. You should use javascript.

<pre data-line=""> <code readonly="true"> <xmp><style> body { height: 2000px; / Just for demonstration / } .fixed { position: relative; / Initially relative position / top: 0; / To keep the div at the top / width: 200px; / Adjust width as needed / height: 100px; / Adjust height as needed / background-color: lightblue; border: 1px solid blue; } .fixed.fixed-position { position: fixed; / Apply fixed position when scrolled / } </style> Fixed Div </xmp> </code> </pre> <style> .fixed { position: relative; / Initially relative position / bottom: 0; / To keep the div at the top / width: 200px; / Adjust width as needed / height: 100px; / Adjust height as needed / background-color: red; border: 1px solid blue; } .fixed.fixed-position { position: fixed; / Apply fixed position when scrolled / } </style> Fixed Div