实现静态透明导航栏覆盖头部图片，避免滚动遮挡页面内容

解决方案 #

根据你的需求，提供两种针对性修改方案，可根据实际场景选择：

方案一：导航栏仅悬浮在头部上方，滚动时随头部离开

此方案下导航栏属于头部区域的一部分，不会固定在页面顶部，滚动时会随头部一同移出视野，完全不会遮挡下方正文内容。

修改步骤：

1. 移除导航栏的fixed-top类（该类会让元素脱离文档流并固定在视口顶部）
2. 利用绝对定位让导航栏固定在头部最上方（你的header已设置position: relative，可直接使用）

代码修改：

• HTML部分：

<nav class="navbar navbar-expand-lg navbar-dark"> <!-- 移除fixed-top类 -->

• CSS部分：

.navbar {
  position: absolute; /* 替换原fixed属性 */
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 9999;
}

方案二：导航栏始终固定在顶部，且不遮挡下方内容

若希望导航栏一直固定在页面顶部，同时让正文内容自动避开导航栏，可保留fixed-top类，通过给正文添加顶部内边距实现内容不被遮挡。

修改步骤：

1. 保留导航栏的fixed-top类，维持透明效果
2. 给页面主体（或正文容器）添加与导航栏高度匹配的padding-top

代码修改：

• CSS部分：

body {
  padding-top: 70px; /* 数值与导航栏实际高度一致，避免内容被遮挡 */
}

可选优化（增强体验）

如果希望滚动时导航栏从透明切换为带背景色，提升可读性，可添加滚动监听脚本：

window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  window.scrollY > 100 ? navbar.classList.add('bg-dark') : navbar.classList.remove('bg-dark');
});

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