如何用Bootstrap和jQuery实现滚动收缩带阴影的头部导航？

问题诊断 #

你提供的JavaScript代码错误粘贴为CSS内容，这是核心问题之一；另外原生滚动事件触发频繁会导致低性能设备卡顿，阴影闪烁则可能源于过渡属性冲突或浏览器重绘重排的性能瓶颈。

优化步骤 #

1. 修正并优化JavaScript代码 #

用节流函数控制滚动事件触发频率，减少不必要的DOM操作，同时提前缓存DOM元素提升性能：

// 节流函数：限制事件触发频率，平衡流畅度与性能
function throttle(func, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

$(document).ready(function() {
  // 提前缓存导航元素，避免重复DOM查询
  const $navbar = $('.navbar');
  // 监听滚动事件，用节流优化
  $(window).scroll(throttle(function() {
    // 设定滚动阈值（如50px），超过则收缩导航
    $(this).scrollTop() > 50 ? $navbar.addClass('shrink') : $navbar.removeClass('shrink');
  }, 50)); // 50ms触发一次，适配多数设备性能
});

2. CSS优化：提升过渡流畅度与阴影稳定性 #

• 修正选择器错误（原.shrink .navbar应为.navbar.shrink，因为shrink类是直接添加在导航元素上）
• 用transform: translateZ(0)触发GPU加速，减少重绘重排
• 添加will-change提示浏览器提前优化过渡属性
• 调整阴影参数，避免复杂计算导致的闪烁

优化后的CSS：

.navbar {
  padding: 20px 0;
  transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  will-change: padding, box-shadow;
  /* 触发GPU加速，减少重绘卡顿 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.navbar.shrink {
  padding: 10px 0;
  /* 改用更柔和、计算成本低的阴影 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#logo {
  font-size: 2.5rem;
  padding: 10px 0;
  transition: font-size 0.3s ease-in-out, padding 0.3s ease-in-out;
  will-change: font-size, padding;
}

.navbar.shrink #logo {
  font-size: 1.5rem;
  padding: 5px 0;
}

3. 额外优化细节 #

• 确保导航元素的z-index符合Bootstrap层级规范（默认固定导航为z-index: 1030），避免被其他元素遮挡阴影
• 移动端测试时，关闭浏览器的"平滑滚动"特性，避免与自定义过渡冲突
• 若仍有阴影闪烁，可尝试将阴影属性单独抽离为独立过渡，避免与padding同时过渡

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