CSS Position Sticky - How It Really Works!

My First Play with Position Sticky

.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>

How CSS Position Sticky Really Works!

.some-component{
position: sticky;
top: 0px;
}
Sticky item & Sticky container

Understanding the CSS Sticky Behavior

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 Sticky is supported by all major modern browsers, except for old IE.
  • For Safari browsers you will need to add the -webkit prefix.
position: -webkit-sticky; /* Safari */  
position: sticky;
can i use position sticky — more than 86% browser support

Final Words

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create Native Apps for Android and iOS using React Native — Part 1

Improving Frontend deployment workflow in a legacy Django application.

Threads in Node 10.5.0: a practical intro

JavaScript Conditional Statements

4 Ways to Shrink your Javascript Bundle by 50 percent

visual representation of javascript bundles

Why Props in components and not Context API?

Node.js: How to Power Up Your Logging

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
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

Three design principles for your CSS layout

How I created the front end for a coin flip game that allows two people to play against each other

What the glitch

HOW CSS TRANSITION WORK