滚动时切换Bootstrap 3头部容器类：container与container-fluid

嘿，我来帮你搞定这个需求！你的参考代码已经有了很好的基础，我们只需要修改类切换的逻辑，就能轻松实现「向下滚动切换为.container-fluid，回到顶部恢复.container」的效果。

步骤1：确认头部容器的初始结构 #

首先确保你的头部容器默认带有.container类，比如：

<header id="nav" class="container">
  <!-- 这里放你的头部导航、logo等内容 -->
</header>

步骤2：修改JavaScript滚动监听逻辑 #

下面是两种可选的实现逻辑，你可以根据自己的需求选择：

逻辑1：滚动超过指定距离就切换（和你参考代码的逻辑一致）

只要滚动距离超过50px（可以自行调整这个数值），就切换为流体容器，回到顶部附近时恢复：

$(window).scroll(function() {
  // 获取当前滚动到的距离
  const scrollDistance = $(this).scrollTop();
  
  // 判断滚动位置，切换容器类
  if (scrollDistance > 50) {
    // 移除container类，添加container-fluid类
    $('#nav').removeClass('container').addClass('container-fluid');
  } else {
    // 移除fluid类，恢复container类
    $('#nav').removeClass('container-fluid').addClass('container');
  }
});

逻辑2：根据滚动方向切换（向下滚就变fluid，回到顶部才恢复）

如果你想要的是「只要向下滚动就切换成流体容器，只有向上滚动回到顶部时才恢复」，可以用这个逻辑（需要记录上一次的滚动位置来判断方向）：

// 保存上一次的滚动位置，用来判断滚动方向
let lastScrollPosition = 0;

$(window).scroll(function() {
  const currentScroll = $(this).scrollTop();
  
  if (currentScroll > lastScrollPosition && currentScroll > 0) {
    // 向下滚动且不在顶部，切换为流体容器
    $('#nav').removeClass('container').addClass('container-fluid');
  } else if (currentScroll <= 0) {
    // 回到顶部，恢复默认容器
    $('#nav').removeClass('container-fluid').addClass('container');
  }
  
  // 更新上一次的滚动位置
  lastScrollPosition = currentScroll;
});

关键注意点 #

• 一定要先移除旧的容器类，再添加新的！因为Bootstrap的.container和.container-fluid都是设置宽度的核心类，同时存在会导致样式冲突。
• 确保你的页面已经引入了jQuery（Bootstrap 3本身依赖jQuery，所以你应该已经引入了），否则$符号会报错。
• 可以根据自己的设计需求，调整50这个触发切换的滚动距离数值。

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