Укладка заголовков боковых меню с помощью прокрутки

Question

Я хочу получить результат, подобный следующему: https://codepen.io/ncerminara/pen/zaGZGK, но сохраняя каждый заголовок на переднем плане, в отличие от сейчас (теперь он сохраняет только один за раз). По сути, я хочу накапливать их, сжимая содержимое каждого раздела, прокручивая вниз, а расширяя их, прокручивая вверх. Я использую s css с angular framework (TypeScript).

  <article>
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="title-section">
                    <h1>Stacking Sticky Sidebars with Bootstrap 4</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-7">

                <div class="content-section">
                    <h2>Content Section</h2>
                </div>
            </div>
            <div class="col-5">

              <div class="sidebar-item">
                <div class="make-me-sticky">
                  <h3>Item 1</h3>
                </div>
              </div>
              <div class="sidebar-item">
                <div class="make-me-sticky">
                  <h3>Item 2</h3>
                </div>
              </div>
              <div class="sidebar-item">
                <div class="make-me-sticky">
                  <h3>Item 3</h3>
                </div>
              </div>
              <div class="sidebar-item">
                <div class="make-me-sticky">
                  <h3>Item 4</h3>
                </div>
              </div>

            </div>
        </div>
    </div>
</article>

    .content-section {
  min-height: 2000px;
}
.sidebar-section {
  position: absolute;
  height: 100%;
  width: 100%;
}


.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;

    /* Position the items */
    &:nth-child(2) { top: 25%; }
    &:nth-child(3) { top: 50%; }
    &:nth-child(4) { top: 75%; }
}


.make-me-sticky {
    position: sticky;
    top: 0;

  padding: 0 15px;
}



/* Ignore This, just coloring */
body {
  background: #fff;
}

article {
  background: #f1f1f1;
  border-radius: 12px;
  padding: 25px 0 600px;
}


.title-section, .content-section, .sidebar-section {
  background: #fff;
  // border-radius: 12px;
  // border: solid 10px #f1f1f1; 
}

.title-section {
  text-align: center;
  padding: 50px 15px;
  margin-bottom: 30px;
}

.content-section h2 {
  text-align: center;
  margin: 0;
  padding-top: 200px;
}

.sidebar-item {
  text-align: center;

  h3 {
    background: gold;
    max-width: 100%;
    margin: 0 auto;
    padding: 50px 0 100px; 
    border-bottom: solid 1px #fff;
  }
}