<div class="wrapper">
  <p>通常テキスト</p>
  <div class="sticky_item">固定される要素</div>
  <p>通常テキスト</p>
  <div class="sticky_item">固定される要素</div>
  <p>通常テキスト</p>
</div>
.wrapper {
  height: 300vh;
  text-align: center;
}

.sticky_item {
  position: sticky;
  height: 30px;
  top: 0;
  background-color: #555;
  color: #fff;
  padding: 20px 0;
}

p {
  padding: 50px 0;
  background-color: #999
}

* {
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.