CSS Sticky Experiment

by Matthew Schenker

HTML

<div class="container">
  <div class="nonsticky">
    <p>I'm just a non-sticky item!</p>
  </div>
  <div class="nonsticky">
    <p>I'm another non-sticky item!</p>
  </div>
  <div class="nonsticky">
    <p>And I'm nonsticky #3!</p>
  </div>
  <div class="stickyitem">
    <p>Sticky!</p>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.nonsticky {
  padding: 10px 0;
  border: 1px solid #000;
  height: 1000px;
  width: 50px;
}

.stickyitem {
  position: sticky;
  top: 0;
  left: 5%;
  background-color: blue;
  border: 1px solid #000;
  color: #fff;
  width: 40px;
  height: 100px;
  align-self: flex-start;
}