position sticky

explain position sticky in css

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Position Sticky</title>
</head>
<body>
  <div class="nav">Navigation</div>
  <div class="container">
    <div class="sidebar">
      <div class="inline-block static">static</div>
      <div class="inline-block fixed">fixed</div>
      <div class="inline-block sticky">sticky</div>     
    </div>
    <div class="inline-block long-text">Long Text Area.</div>
  </div>
</body>
</html>

CSS

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  border: 2px solid;
}

.inline-block {
  display: inline-block;
  padding: .6rem;
}

.nav {
  flex: 1;
  width: 100%;
  height: 80px;
  border: 2px solid;
  margin-bottom: 5px;
}

.sidebar {
  flex: 1;
  height: auto;
  min-width: 220px;
}

.long-text {
  min-height: 200vh;
  background: #eee;
  flex: 1;
}

.static {
  position: static;
  background: orange;
}

.fixed {
  position: fixed;
  top: 99px;
  left: 155px;
  background: pink;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  background: #8a4baf;
}