position sticky

position sticky example

by Fig77

HTML

<body>
<div class="container">
  <div class="box darker-black sticky-top-0"></div>
  <div class="box green margin-bottom-1"></div>
  <div class="box green margin-bottom-1"></div>
  <div class="box green margin-bottom-1"></div>
  <div class="box green margin-bottom-1"></div>
  <div class="box green margin-bottom-1"></div>
</div>
<div class="box darker-black margin-top-1 border-1"></div>


</body>

CSS

body {
  height: 2500px;
  background: #b2b2b2;
}

.container {
  background: #fff;
  height: 1100px;
}

.box {
  height: 100px;
  width: 100px;
}

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



.margin-bottom-1 {
  margin-bottom: 100px;
}

.border-1 {
  border-style: solid;
  border-color: #fff;
}

.darker-black {
  background: #212121;
}

.light-black {
  background: #4d4d4d;
}

.green {
  background: green;
}