.contentContainer{
  background-color: gray;
  height: 100px;
  margin: 1em 0;
}
.scrollContainer{
  height: 300px;
  position: relative;
  overflow: scroll;
  border: 1px solid
}
.scrollContainer_header{
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: red;
  text-align: center;
  z-index: 2;
}
.scrollable_content{
  position: relative;
}

<div id="app">
  <div class="contentContainer">
  Content #1
  </div>
  <div class="scrollContainer">
    <div class="scrollContainer_header">
      HEADER
    </div>
    <div class="scrollable_content">
        LOOOOONG SCROLLABLE CONTENT
    </div>
  </div>
  <div class="contentContainer">
    Content #2
  </div>
</div>

.scrollContainer_header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 30px;
    background-color: red;
    text-align: center;
    z-index: 2;
}