如何相对于容器修复<div>用于滚动

如何解决如何相对于容器修复<div>用于滚动

我有一个带有顶部菜单栏的页面，在它的下面，我有一个内容列表div和内容div以及带有侧栏的列表中的每个项目。 我正在尝试将侧栏放置在左侧（粘性div），在滚动时固定在某个点，并且内容div可见。

谢谢。

Side bar should be fixed at this point

.div {
  display: block;
}

.bodyWrapper {
  margin: auto;
  width: 90%;
}

.TopPageHeader {
  position: fixed;
  top: 0;
  background: #33669A;
  width: 90%;
  height: 68px;
  padding-bottom: 5px;
  padding-top: 5px;
  margin: auto;
  z-index: 4;
}

.MainMenu {
  margin-top: 10px;
  display: flex;
}

.PageContent {
  width: 100%;
}

.ContentItemList {
  top: 78px;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: grey;
  position: sticky;
  width: 100%;
  z-index: 2;
}

.ItemList {
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
}

.ItemList > ul {
  padding: 8px;
  height: 32px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.ItemListTitle {
  display: inline-block;
  height: 32px;
  padding-left: 30px;
}

.item1Container {
  margin-top: 70px;
}

.itemTitle {
  overflow: hidden;
  height: 30px;
  margin-bottom: 10px;
  margin-left: 87px;
  font-weight: bold;
  font-size: 28px;
}

.itemBody{
  position: relative;
}

.Sidebar {
  min-height: 200px;
  width: 70px;
  background-color: antiquewhite;
  position: absolute;
  top: -40px;
  height: calc(100% + 40px);
  z-index: 3;
  }

.SidebarContent {
  position: sticky;
  top: 0px;
}

.itemContent {
  margin-left: 75px;
}

.item1 {
  background-color: green;
  height: 500px;
  margin-bottom: 70px;
}

.item2 {
  background-color: yellow;
  height: 600px;
  margin-bottom: 70px;
}

.item3 {
  background-color: aqua;
  height: 500px;
  margin-bottom: 70px;
}

.item4 {
  background-color: coral;
  height: 900px;
  margin-bottom: 70px;
}

body {
  min-height: 1156px;
}

<div class="bodyWrapper">
  <div>  
    <div class="TopPageHeader">
      <div class="MainMenu">
        <button style="margin-left: 15px">Menu 1</button>
        <button style="margin-left: 15px">Menu 2</button>
        <button style="margin-left: 15px">Menu 3</button>
        <button style="margin-left: 15px">Menu 4</button>
        <button style="margin-left: 15px">Menu 5</button>
      </div>
    </div>
    <div>
      <div class="PageContent">
        <div class="ContentItemList">
          <div class="ItemList">
            <ul>
              <li id="item1" class="ItemListTitle">
                <a title="item1">item1</a>
              </li>
              <li id="item2" class="ItemListTitle">
                <a title="item2">item2</a>
              </li>
              <li id="item3" class="ItemListTitle">
                <a title="item3">item3</a>
              </li>
              <li id="item4" class="ItemListTitle">
                <a title="item4">item4</a>
              </li>
            </ul>  
          </div>
        </div>
        <div id="item1Container" class="item1Container">
          <div class="item1">
            <div class="itemTitle">
              <label>item1 Title</label>
            </div>
            <div class="itemBody">
              <div class="Sidebar">
                <div class="SidebarContent">
                  <button  style="height:45px">Side bar 1</button>
                  <button style="height:45px">Side bar 2</button>
                  <button style="height:45px">Side bar 3</button>
                </div>
              </div>
              <div class="itemContent">
                <div style="height:30px">item1 Content</div>
                <div style="height:230px">Content</div>
                <div style="height:200px">Content2</div>
              </div>
            </div>          
          </div>
        </div>
        <div id="item2Container" class="item1Container">
          <div class="item2">
            <div class="itemTitle">
              <label>item2 Title</label>
            </div>
            <div class="itemBody">
              <div class="Sidebar">
                <div class="SidebarContent">
                  <button  style="height:45px">Side bar 1</button>
                  <button style="height:45px">Side bar 2</button>
                  <button style="height:45px">Side bar 3</button>
                </div>
              </div>
              <div class="itemContent">
                <div style="height:30px">item2 Content</div>
                <div style="height:230px">Content</div>
                <div style="height:300px">Content2</div>
              </div>
            </div>          
          </div>
        </div>
        <div id="item3Container" class="item1Container">
          <div class="item3">
            <div class="itemTitle">
              <label>item3 Title</label>
            </div>
            <div class="itemBody">
              <div class="Sidebar">
                <div class="SidebarContent">
                  <button  style="height:45px">Side bar 1</button>
                  <button style="height:45px">Side bar 2</button>
                  <button style="height:45px">Side bar 3</button>
                </div>
              </div>
              <div class="itemContent">
                <div style="height:30px">item1 Content</div>
                <div style="height:230px">Content</div>
                <div style="height:200px">Content2</div>
              </div>
            </div>          
          </div>
        </div>
        <div id="item4Container" class="item1Container">
          <div class="item4">
            <div class="itemTitle">
              <label>item1 Title</label>
            </div>
            <div class="itemBody">
              <div class="Sidebar">
                <div class="SidebarContent">
                  <button  style="height:45px">Side bar 1</button>
                  <button style="height:45px">Side bar 2</button>
                  <button style="height:45px">Side bar 3</button>
                </div>
              </div>
              <div class="itemContent">
                <div style="height:30px">item1 Content</div>
                <div style="height:230px">Content</div>
                <div style="height:200px">Content2</div>
                <div style="height:400px">Content3</div>
              </div>
            </div>          
          </div>
        </div>
      </div>
    </div>  
  </div>
</div>