如何使用JavaScript自动切换前后active类 实现滚动删除对应项功能

实现思路 #

• 新增变量记录导航栏上一次横向滚动位置，用于判断滚动方向
• 为导航栏绑定横向滚动监听事件，实时对比滚动位置判断滚动方向
• 以当前处于激活状态的导航项为基准，结合滚动方向删除对应侧的导航项即可
  如果需要后续恢复删除的导航项，可以提前克隆所有导航项存储到变量中，需要时再插入即可，也可以将删除逻辑改为隐藏（设置display: none）来提升交互流畅度。

完整修改后的JS代码 #

// 提前定义全局变量
// 记录导航栏上一次横向滚动位置
let lastNavScrollLeft = 0;
// 缓存所有导航项，用于后续需要恢复时使用
const allNavItems = $("#stickyMenu .cat-nav").clone();
// 你原有代码中的span_list变量请确保提前正确初始化，值为所有内容区块的ID数组

$(window).on('scroll', function() {
  // 原有吸顶逻辑
  if ($(window).scrollTop() > 400) {
    $("#stickyMenu").addClass('sticky');
  } else {
    $("#stickyMenu").removeClass('sticky');
  }

  // 原有导航激活状态切换逻辑
  const scrollPosition = $(window).scrollTop();
  for (i = 0; i < span_list.length; i++) {
    if (scrollPosition >= ($("#" + span_list[i]).offset().top) - 50) {
      $("#nav" + (i + 1)).siblings().removeClass("active");
      $("#nav" + (i + 1)).addClass("active");
    }
  }
})

// 新增导航栏横向滚动监听逻辑
$("#stickyMenu").on('scroll', function() {
  const currentScrollLeft = $(this).scrollLeft();
  const $activeNav = $(this).find('.cat-nav.active');

  // 向右滚动（浏览右侧导航项），删除当前激活项左侧的所有导航项
  if (currentScrollLeft > lastNavScrollLeft) {
    $activeNav.prevAll().remove();
    // 重置滚动位置，避免删除元素后出现滚动偏移
    $(this).scrollLeft(0);
  } 
  // 向左滚动（浏览左侧导航项），删除当前激活项右侧的所有导航项
  else if (currentScrollLeft < lastNavScrollLeft) {
    $activeNav.nextAll().remove();
  }

  // 更新上一次滚动位置记录
  lastNavScrollLeft = currentScrollLeft;
})

注意：你原有代码末尾有多余的});闭合符，修改时请删除避免语法报错。

补充CSS配置（如果未配置横向滚动的话） #

#stickyMenu {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  /* 保留你原有的其他sticky、高度、间距等样式 */
}

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