Bootstrap导航栏条件固定失效 小屏常驻/宽屏滚动显示逻辑异常

• 原代码只在页面第一次加载时判断一次屏幕宽度，用户拖动浏览器边缘调整窗口大小的时候，不会切换对应的导航栏逻辑，很容易出现大小屏规则冲突。
• 在if/else条件块内部声明函数、绑定事件，会因为JS的作用域提升规则出现逻辑覆盖，而且条件不满足的分支绑定的事件不会被解绑，会一直触发。
• 没有给导航栏加固定定位的基础样式，元素默认是静态定位，这时候改top属性完全不会生效，这也是你之前加sticky、fixed没出效果的核心原因之一。
• 小屏逻辑只在页面加载时跑一次，如果大屏下滚动把导航栏隐藏了（top设为-500px），再把窗口缩到小屏，导航栏不会自动显示，样式会残留。
• 你贴的HTML里第一个导航链接多打了一个双引号，会导致浏览器解析样式出错，记得顺手删掉。

1. 先加基础CSS样式 #

首先给导航栏加固定定位，这步是必须的，不然所有top控制都不生效：

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  /* 加个0.3秒的过渡，滑入效果更自然，不需要可以删掉 */
  transition: top 0.3s ease;
  /* z-index和Bootstrap默认导航栏层级一致，避免被轮播、卡片之类的元素盖住 */
  z-index: 1030;
}

2. 修复HTML小错误 #

找到导航里第一个Projekte链接，把a标签后面多余的双引号删掉，原代码里写的是<a " class=，改成：

<a class="nav-item nav-link active" style="margin-right: 40px; font-size: 18px;" href="index.html">Projekte <span class="sr-only">(current)</span></a>

3. 替换原有JS代码 #

把你之前写的那段判断宽度、绑定滚动的JS全删掉，换成下面这段：

function setNavbarPosition() {
  const navbar = document.getElementById('navbar');
  const winWidth = $(window).width();
  // 宽度小于766px，直接固定在顶部
  if (winWidth < 766) {
    navbar.style.top = '0';
    return;
  }
  // 宽度大于等于766px，根据滚动距离判断显示隐藏
  const scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
  navbar.style.top = scrollHeight > 200 ? '0' : '-500px';
}

// 页面加载完先跑一次
setNavbarPosition();
// 滚动时触发判断
window.onscroll = setNavbarPosition;
// 窗口大小变化时立刻触发判断，避免切屏样式错乱
window.onresize = setNavbarPosition;

• 所有逻辑都收敛到setNavbarPosition一个函数里，不管是页面加载、滚动还是拉伸缩放窗口，都会重新读取当前屏幕宽度和滚动距离，不会出现事件残留、逻辑覆盖的问题。
• 导航栏隐藏时top设为-500px，是为了保证完全移出屏幕，你可以根据自己导航栏的实际高度调整这个值，比如导航栏高70px，设成-70px就行，滑入速度更快。
• 如果你不需要滑入动画，把CSS里的transition那行删掉就可以。

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