Sticky elements with elements in between

Interesting designer ask to make two nav elements sticky but everything in between doesn't. Can we achieve this?

by Augustus Yuan

HTML

<div class="sticky">
Header 1
</div>
<div class="not-sticky">
Element 1
</div>
<div class="not-sticky">
Element 2
</div>
<div class="sticky">
Header 1
</div>

CSS

body {
  height: 1000px;
}

div {
  height: 100px;
  background: red;
  margin: 10px;
  color: white;
}