移动端视图下如何禁用侧边栏跟随滚动的JavaScript交互效果

核心逻辑是增加视口尺寸判断门槛，仅在符合要求的桌面、平板视图下绑定滚动跟随事件，小屏场景直接跳过逻辑、清理可能残留的动态样式和事件绑定，避免移动端出现布局异常。

实现要点 #

• 可根据项目实际的响应式断点自定义小屏判定阈值，示例采用视口宽度<768px判定为移动端/小屏场景
• 滚动事件增加命名空间，避免跨断点切换时误解绑页面上其他滚动逻辑
• 窗口尺寸跨断点变化时，自动做事件解绑、样式清理，不会残留之前的动态定位效果
• 修复原代码中高度变量赋值错误的bug：原代码直接将字符串'height'作为样式值写入，会导致固定定位时高度规则失效

改造后的完整实现代码 #

// 自定义小屏判定方法，阈值可根据项目实际断点调整
const isSmallScreen = () => window.innerWidth < 768;

// 仅在非小屏场景下执行侧边栏滚动跟随逻辑
if (!isSmallScreen()) {
  const $sidebarWrap = $('#filters-sidebar-wrap');
  const $sidebar = $('#filters-sidebar');
  let followLength = $sidebarWrap.height() - $sidebar.height() + $sidebarWrap.offset().top;

  // 绑定带命名空间的滚动事件
  $(window).on('scroll.sidebarFollow', function () {
    const currentScrollTop = $(this).scrollTop();
    const sidebarHeight = $sidebar.height() + 'px';
    const wrapOffsetTop = $sidebarWrap.offset().top;

    if (currentScrollTop < wrapOffsetTop) {
      $sidebar.css({
        'position': 'absolute',
        'top': '40px',
        'width': '290px'
      });
    } else if (currentScrollTop > followLength) {
      $sidebar.css({
        'position': 'absolute',
        'bottom': '0',
        'top': 'auto',
        'width': '290px'
      });
    } else {
      $sidebar.css({
        'position': 'fixed',
        'top': '128px',
        'width': '290px',
        'height': sidebarHeight
      });
    }
  });

  // 监听窗口尺寸变化，跨断点时做状态清理
  $(window).on('resize.sidebarFollow', function () {
    if (isSmallScreen()) {
      // 小屏场景下解绑所有侧边栏跟随相关事件
      $(window).off('scroll.sidebarFollow resize.sidebarFollow');
      // 清除JS动态添加的内联样式，恢复移动端默认布局
      $sidebar.removeAttr('style');
    } else {
      // 切回桌面端时重新计算位置参数，避免尺寸变化导致定位计算错误
      followLength = $sidebarWrap.height() - $sidebar.height() + $sidebarWrap.offset().top;
    }
  });
}

适配调整说明 #

• 如果项目需要将iPad竖屏也纳入禁用范围，可直接把isSmallScreen的判定阈值调整为1024px，视口宽度小于该值时就自动禁用跟随效果
• 如果侧边栏的固定宽度在小屏下需要适配，可在CSS的媒体查询里单独定义小屏状态下的侧边栏宽度，不会和JS动态添加的桌面端样式冲突

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