为分区制作固定的标题

Question

我有一个可以滚动的网页，也可以滚动一个分区。所以我希望为该分区设置一个固定的标题，这样即使在滚动之后它也会保持在顶部。但是，在this示例之后，标题在滚动div之后保持在顶部，但是在滚动网页后降低（相对于div的顶部，相对于它停留在同一位置的窗口） 。所以基本上，当用户向下滚动时，它需要上升。这是我的代码：

#leftDiv,
#centreDiv,
#rightDiv {
  background-color: rgb(14, 89, 133);
  border: 1px solid black;
  height: 75vh;
  width: 30vw;
  overflow-x: hidden;
  margin-top: 100px;
  position: relative;
}

.textWrapper {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: 5vh;
}

.textWrapper #header1,
.textWrapper #header2 {
  color: red;
  padding-top: none;
  position: fixed;
  z-index: 8;
}

#messages1,
#messages2 {
  position: absolute;
  bottom: 0;
  width: 19vw;
}

.backToGroup {
  float: left;
}

.send {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 7vw;
}

<div id="centreDiv" class="chatpart">
  <span id="insideGroup1">
        <div class="textWrapper">
            <div id="header1">
              Hello world
            </div>
          <span id="messages1">
            khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>khucasjdeugb<br>
          </span>
</div>
<input type="text" id="message1" placeholder="Enter your message here...">
<button class="send" onclick="initializeMessage1()">Send</button>
</span>
</div>