如何让.position-sticky在另一个角度组件(导航栏)下方停止？

<div class="navbar">
  <!-- 导航栏内容 -->
</div>

<div class="content">
  <!-- 其他页面内容 -->
  <div class="position-sticky">
    <!-- .position-sticky元素的内容 -->
  </div>
</div>

.position-sticky {
  position: relative;
  z-index: 1; /* 确保位于导航栏下方 */
}

.navbar {
  position: sticky;
  top: 0;
  /* 导航栏的其他样式属性 */
}

.content {
  /* 页面内容的样式属性 */
}

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  var stickyElement = document.querySelector('.position-sticky');
  var navbarHeight = navbar.offsetHeight;

  if (window.pageYOffset >= navbarHeight) {
    stickyElement.style.position = 'fixed';
    stickyElement.style.top = navbarHeight + 'px';
  } else {
    stickyElement.style.position = 'relative';
    stickyElement.style.top = 'auto';
  }
});