CSS Position Sticky - How It Really Works!

.some-component{
position: sticky;
top: 0;
}

The Sticky Exploration

<!-- DOESN'T WORK!!! -->
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>
.some-component{
position: sticky;
top: 0px;
}
Sticky item & Sticky container

Stick to the bottom?!

.component{
position: sticky;
top: 0;
}
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
.main-footer{     
position: sticky;
bottom: 0;
}

Browsers Support

position: -webkit-sticky; /* Safari */  
position: sticky;
can i use position sticky — more than 86% browser support

Final Words

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store