如何使用带有顶部和底部粘性导航栏的全屏div

<div class="container">
  <header class="sticky-top">
    <!-- 顶部导航栏内容 -->
  </header>
  
  <main>
    <!-- 页面主要内容 -->
  </main>
  
  <footer class="sticky-bottom">
    <!-- 底部导航栏内容 -->
  </footer>
</div>

.container {
  position: relative;
  min-height: 100vh;
}

.sticky-top {
  position: sticky;
  top: 0;
  z-index: 100;
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 100;
}

window.addEventListener('scroll', function() {
  var header = document.querySelector('.sticky-top');
  var footer = document.querySelector('.sticky-bottom');
  
  if (window.scrollY > 0) {
    header.classList.add('scrolled');
    footer.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
    footer.classList.remove('scrolled');
  }
});