如何在使用滚动上下移动元素的同时将元素停在页脚行

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 滚动元素 -->
  </div>
  <div class="footer">
    <!-- 页脚行元素 -->
  </div>
</div>

.scroll-container {
  height: 400px; /* 设置容器的高度 */
  overflow-y: scroll; /* 启用垂直滚动条 */
  position: relative; /* 设置容器为相对定位，用于定位页脚行元素 */
}

.scroll-content {
  height: 1000px; /* 设置滚动内容的高度 */
}

.footer {
  position: absolute; /* 设置页脚行元素为绝对定位 */
  bottom: 0; /* 将页脚行元素定位到容器底部 */
  width: 100%; /* 设置页脚行元素宽度为容器宽度 */
}

const scrollContainer = document.querySelector('.scroll-container');
const scrollContent = document.querySelector('.scroll-content');
const footer = document.querySelector('.footer');

scrollContainer.addEventListener('scroll', function() {
  const containerHeight = scrollContainer.clientHeight;
  const contentHeight = scrollContent.clientHeight;
  const scrollTop = scrollContainer.scrollTop;

  if (scrollTop + containerHeight >= contentHeight) {
    scrollContent.style.position = 'absolute';
    scrollContent.style.bottom = '0';
  } else {
    scrollContent.style.position = 'static';
  }
});