粘性导航栏（sticky navbar）消失且文字覆盖视频问题求助

咱们先拆解下你遇到的两个核心问题的根源：

1. 全屏视频导致下方内容（包括导航栏）被覆盖：视频用了position: absolute脱离文档流，后续元素默认从页面顶部开始布局，自然会跑到视频下方。
2. 粘性导航栏消失：一是你注释掉了.sticky的核心定位样式，二是同时存在两套粘性逻辑（原生JS+jQuery插件），导致样式切换冲突混乱。

下面是分步可落地的修复方案：

1. 修复视频与内容的布局冲突 #

先给视频套一个容器，让它占据初始全屏空间，确保后续内容自动排在容器下方：

<!-- 给视频添加容器 -->
<div class="video-container">
  <video id="myVideo" autoplay muted loop>
    <!-- 你的视频源 -->
  </video>
</div>

对应修改CSS：

.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 占满当前视口高度 */
  overflow: hidden;
}

#myVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让视频居中显示 */
  min-width: 100%;
  min-height: 100%;
}

这样视频容器会稳稳占据初始全屏，后续的导航栏、文字内容会自动排在容器下方，不会再出现覆盖问题。

2. 修复粘性导航栏的逻辑冲突与样式缺失 #

第一步：清理重复的粘性逻辑 #

你的代码里同时混用了原生JS的myFunction和jQuery的sticky-onscroll插件逻辑，这是导致导航栏状态混乱的关键。建议保留更轻量的原生JS方案，删除冗余的jQuery粘性代码：

$(document).ready(function() {
  // 保留原生JS粘性逻辑
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;

  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky")
    } else {
      navbar.classList.remove("sticky");
    }
  }
  window.onscroll = function() {myFunction()};

  // 修复SeeMore点击逻辑（原代码类名判断多了点，文字切换逻辑反了）
  $('.SeeMore').click(function() {
    var $this = $(this);
    if ($this.hasClass('SeeMore')) {
      $this.removeClass('SeeMore')
           .addClass('SeeMore2')
           .text('READ LESS');
    } else {
      $this.removeClass('SeeMore2')
           .addClass('SeeMore')
           .text('READ MORE');
    }
  });
});

第二步：恢复并完善.sticky样式 #

把你注释掉的.sticky样式打开，补充必要属性确保导航栏固定后不消失：

/* 取消注释并完善粘性导航样式 */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* 确保导航栏在最上层，不被其他元素遮挡 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选：添加阴影增强视觉区分 */
}

/* 给导航栏下方的内容添加上边距，避免被固定导航栏覆盖 */
.archive {
  margin-top: 130px; /* 根据导航栏高度（85px）调整，确保内容不被遮挡 */
}

3. 修复其他小细节 #

• 你的CSS代码末尾有截断（.search-text { color: wh），记得补全完整样式，避免影响其他元素渲染。
• 检查导航栏的z-index，确保没有其他元素的z-index值比它高，导致被遮挡。

验证修复效果 #

完成以上修改后：

1. 页面初始会显示全屏视频，视频下方的导航栏和文字内容正常排列，不会出现覆盖。
2. 滚动页面时，导航栏到达视口顶部会自动固定，滚动回下方时会回到原位置，实现你想要的典型粘性导航效果。

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