JS控制导航栏上移隐藏时Bootstrap卡片等页面内容消失问题

你遇到的布局错乱、卡片消失问题核心是JS代码存在语法错误：你贴出的脚本末尾闭合花括号后多了两个多余的反引号`，属于非法字符，会导致整段JS解析失败，阻塞同执行上下文中所有后续脚本运行。Bootstrap部分组件依赖JS完成初始化或布局适配，脚本被阻塞后就会出现组件不渲染、间距丢失的问题——这也符合你提到的“改动函数括号后页面恢复正常”的测试结果：改动括号时刚好破坏了错误语法结构，脚本不再报错，但函数逻辑也同步失效。

另外你原实现还有三个逻辑缺陷：

• 硬编码top: -500px没有匹配导航栏实际高度，可能出现导航栏隐藏不完整、偏移过多遮挡其他元素的问题
• 没有给导航栏设置定位属性，top样式规则默认对静态定位元素无效
• 固定定位的Bootstrap导航栏会给body加对应高度的顶部内边距，直接隐藏导航栏会导致页面顶部留空

1. 先给导航栏补全必要的定位和过渡样式，实现平滑隐藏效果：

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; /* 匹配Bootstrap默认导航栏层级，避免被其他元素遮挡 */
  transition: top 0.3s ease; /* 可选，加滑动动画更自然 */
}

2. 修正JS语法错误，替换硬编码的偏移值，同步处理body的内边距适配：

window.onload = function(){
  setTimeout(function (){
    const navbar = document.getElementById("navbar");
    // 动态获取导航栏实际高度做偏移，不需要硬写像素值
    navbar.style.top = `-${navbar.offsetHeight}px`;
    // 同步移除body的顶部预留内边距，避免顶部留空白
    document.body.style.paddingTop = 0;
  },2000);
}

• 调试这类前端问题优先打开浏览器开发者工具的Console面板，语法错误会直接抛出明确的SyntaxError提示，定位问题效率远高于逐行删改代码
• 如果后续需要做滚动到顶部再显示导航栏的逻辑，只需要在滚动回调里把navbar.style.top改回0，同时把body的paddingTop改回导航栏高度即可，不需要额外操作DOM
• 不建议用display: none做隐藏，会直接把导航栏从渲染流里移除，后续做显示动画、交互判断都更麻烦，偏移隐藏的方案性能和灵活性都更好

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