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

带有顶部和底部粘性导航栏的全屏div可以通过CSS和JavaScript来实现。下面是一种常见的实现方式：

HTML结构：

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

CSS样式：

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

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

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

JavaScript（可选）：如果需要在滚动时动态添加或移除导航栏的样式，可以使用JavaScript来实现。以下是一个简单的示例：

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');
  }
});

通过上述代码，你可以实现一个带有顶部和底部粘性导航栏的全屏div。顶部导航栏和底部导航栏会在滚动时保持在页面的顶部和底部，并且可以根据需要添加额外的样式或交互效果。

腾讯云相关产品和产品介绍链接地址：