我试图创建一个粘在一边的元素，停留在顶部的其他项目在同一容器中滚动时。但是，我在执行过程中遇到了一些问题。下面的代码尝试创建一个粘在一边的元素，当滚动时，该元素应该停留在容器中其他项目的顶部。然而，aside元素要么不粘在一起，要么与其他项目重叠。
我希望sticky aside元素粘在容器的顶部，并随着页面滚动，直到到达容器的末尾，在那里它应该停止滚动。它不应与容器中的其他项目重叠。
下面是我尝试过的代码：

window.addEventListener('scroll', function() {
  var stickyAside = document.getElementById('sticky-aside');
  var container = stickyAside.closest('.container');
  var containerTop = container.offsetTop;
  var containerBottom = containerTop + container.offsetHeight;
  var asideHeight = stickyAside.offsetHeight;

  if (window.pageYOffset > containerBottom - asideHeight) {
    stickyAside.classList.add('sticky');
  } else {
    stickyAside.classList.remove('sticky');
  }
});

#sticky-aside {
  width: 100%;
  top: 0;
}

.row {
  position: relative;
}

.sticky {
  position: fixed;
  width: 100%;
  top: 0;
}

<div class="container mt-5">
  <div class="row">
    <!-- My posts section -->
  </div>
</div>

<div class="container mt-5">
  <div class="row mt-5 border-top border-dark pt-5">
    <aside class="col-sm-4" id="sticky-aside">
      <!-- Sticky aside content -->
    </aside>
  </div>
</div>