Playing with sticky position

by Spencer Smith

HTML

<div class="view">
  <section>
    <div class="name">One</div>
    <div>Spencer Smith</div>
    <div>Spencer Smith</div>
    <div>Spencer Smith</div>
  </section>
  <section>
    <div class="name">Two</div>
    <div>Brooke Smith</div>
    <div>Brooke Smith</div>
  </section>
  <section>
    <div class="name">Three</div>
    <div>Zach Smith</div>
    <div>Zach Smith</div>
    <div>Zach Smith</div>
  </section>
  <section>
    <div class="name">Four</div>
    <div>Trevor Smith</div>
    <div>Trevor Smith</div>
    <div>Trevor Smith</div>
    <div>Trevor Smith</div>
    <div>Trevor Smith</div>
    <div>Trevor Smith</div>
  </section>
  <section>
    <div class="name">Five</div>
    <div>Jason Smith</div>
    <div>Jason Smith</div>
  </section>
</div>

CSS

* {box-sizing: border-box;}
.view {
  font-family: sans-serif;
  height: 200px;
  float: left;
  border: 1px solid lightgray;
  overflow: scroll;
}
section div {
  padding: 3px 60px;
  margin: 3px 0;
}
.name {
  position: sticky;
  padding: 3px 6px;
  background-color: #d3d3d3;
  top: 0;
}
.name:first-of-type {
  margin-top: 0;
}