如何实现类似susodigital.com的滚动显示导航栏及视频层导航列表？

一、滚动时显示导航栏的核心逻辑 #

• 基础布局与初始状态：用HTML构建导航栏容器，通过CSS设置position: fixed固定在页面顶部；默认状态下通过opacity: 0或transform: translateY(-100%)将其隐藏，同时添加transition属性实现平滑过渡效果。
• 滚动事件监听：使用JavaScript监听window.scroll事件，判断页面滚动距离（window.scrollY）。当滚动距离超过设定阈值（比如100px），给导航栏添加预设的类来切换显示状态；当滚动回到顶部附近时移除该类，隐藏导航栏。
• 样式优化：为导航栏设置合适的z-index值，确保它不会被页面其他元素遮挡；同时可添加背景色、阴影等样式提升视觉效果。

二、视频上方添加导航列表的实现 #

• 层叠布局设置：将视频所在的容器设置为position: relative，导航列表容器设置为position: absolute，通过top、left等属性定位到视频的指定位置；给导航列表设置比视频更高的z-index值，确保导航显示在视频上方。
• 视频兼容性处理：给视频标签设置object-fit: cover，保证视频在容器内正常显示；如果需要保留视频的交互功能（比如播放按钮），无需额外设置pointer-events，默认情况下导航可点击，视频也能正常操作。

三、入门实践指引 #

1. 先掌握CSS定位（fixed/absolute/relative）的核心用法，这是实现层叠布局和固定导航的基础。
2. 学习JavaScript的scroll事件监听，以及通过类名切换来修改DOM样式的方法，避免直接操作内联样式。
3. 从最小Demo开始测试：先单独实现滚动显示导航栏的功能，再完成视频+上方导航的布局，最后将两部分整合。

代码示例 #

HTML结构 #

<!-- 滚动显示的导航栏 -->
<nav class="scroll-navbar">
  <ul class="nav-list">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

<!-- 视频及上方导航 -->
<div class="video-wrapper">
  <video src="your-video.mp4" autoplay muted loop></video>
  <div class="video-top-nav">
    <ul class="video-nav-list">
      <li><a href="#section1">项目介绍</a></li>
      <li><a href="#section2">案例展示</a></li>
      <li><a href="#section3">预约咨询</a></li>
    </ul>
  </div>
</div>

CSS样式 #

/* 滚动导航栏样式 */
.scroll-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1rem 2rem;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
}

.scroll-navbar.show {
  opacity: 1;
  transform: translateY(0);
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: #333333;
  font-weight: 500;
}

/* 视频容器及上方导航样式 */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-top-nav {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: rgba(0,0,0,0.6);
  padding: 1.5rem;
  border-radius: 8px;
  z-index: 10;
}

.video-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.video-nav-list li {
  margin-bottom: 1rem;
}

.video-nav-list a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.1rem;
}

JavaScript逻辑 #

const scrollNavbar = document.querySelector('.scroll-navbar');

window.addEventListener('scroll', () => {
  // 当滚动距离超过100px时显示导航栏
  if (window.scrollY > 100) {
    scrollNavbar.classList.add('show');
  } else {
    scrollNavbar.classList.remove('show');
  }
});

内容的提问来源于stack exchange，提问作者user19251251