可折叠sticky锚点导航div关闭时闪烁问题排查

问题原因 #

1. 原有滚动逻辑不符合设计预期：代码中setTimeout会在滚动触发收起2秒后，无视当前页面实际滚动位置，强制移除closed类展开导航，和“滚动返回顶部才恢复展开”的需求直接冲突。
2. 失焦闪烁的核心诱因：浏览器对失焦状态的窗口/标签页会做定时器节流，窗口失焦期间积压的setTimeout回调会在窗口重新获焦时集中执行，反复切换closed类就会产生可见闪烁；同时失焦期间积压的滚动事件也会在获焦瞬间批量触发，进一步加剧类名反复切换的问题。
3. 点击事件存在逻辑漏洞：锚点链接也被绑定了类名切换事件，用户点击锚点跳转时会意外触发导航收起/展开。

修复后代码 #

JS逻辑 #

$("#my-container").each(function() {
  var ol = document.createElement("ol");
  ol.setAttribute("id", "anchor-navlist");
  $("#anchor-navigation").append(ol);

  var h2 = $("h2", ".node__content");
  h2.each(function() {
    var text = $(this).text();
    var anchorId = text.replace(/\s/g, "-");
    $(this).attr("id", anchorId).addClass("anchor");
    $("<li/>")
      .append(
        $("<a/>", {
          text: text,
          href: "#" + anchorId
        })
      )
      .appendTo("ol#anchor-navlist");
  });

  // 仅点击导航头部时手动切换状态，锚点点击不触发切换
  var isManuallyToggled = false;
  $("#anchor-navigation .heading").click(function() {
    isManuallyToggled = true;
    $("#anchor-navigation").toggleClass("closed");
    // 手动操作3秒后再允许滚动逻辑接管状态，避免操作被立刻覆盖
    setTimeout(() => {
      isManuallyToggled = false;
    }, 3000);
  });

  // 滚动逻辑：移除错误的2秒强制展开，改为直接根据滚动位置判断状态
  var scrollTimer = null;
  var scrollThreshold = 50;
  function handleScroll() {
    if (isManuallyToggled) return;
    if (scrollTimer) clearTimeout(scrollTimer);
    
    scrollTimer = setTimeout(function() {
      var windowTop = $(window).scrollTop();
      if (windowTop > scrollThreshold) {
        $("#anchor-navigation").addClass("closed");
      } else {
        $("#anchor-navigation").removeClass("closed");
      }
    }, 100);
  }

  $(window).on("scroll", handleScroll);
  // 页面初始化时执行一次，匹配初始滚动位置状态
  handleScroll();
});

CSS样式（原有逻辑无需修改，可直接复用） #

#my-container #anchor-navigation {
     max-width: 942px;
     margin: 0 auto;
     position: sticky;
     top: 10px;
     background: #e8e8e8;
     padding: 10px;
     z-index: 100;
}
#my-container #anchor-navigation .heading {
     cursor: pointer;
}
#my-container #anchor-navigation .heading h2 {
     font-size: 20px;
     margin-top: 5px;
     margin-bottom: 5px;
}
#my-container #anchor-navigation ol {
     margin-bottom: 0;
}
#my-container #anchor-navigation.closed ol {
     display: none;
}

HTML结构（原有结构无需修改，可直接复用） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="my-container">
  <div id="anchor-navigation" class="">
    <div class="heading">
      <h2>Explore this page</h2>
    </div>
  </div>
  <div class="node__content">
    <h2 id="Heading-1" class="anchor">Heading 1</h2>
    <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
      Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>

    <h2 id="Heading-2" class="anchor">Heading 2</h2>
    <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vestibulum ac
      diam sit amet quam vehicula elementum sed sit amet dui.</p>

    <h2 id="Heading-3" class="anchor">Heading 3</h2>
    <p>Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor
      accumsan tincidunt.</p>

    <h2 id="Heading-4" class="anchor">Heading 4</h2>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia
      eget consectetur sed, convallis at tellus.</p>
  </div>
</article>

修复点说明 #

• 移除了原逻辑中2秒后强制展开导航的错误定时器，完全按照滚动位置判断导航状态，符合“滚回顶部自动展开”的预期，从根源上消除了定时器积压导致的闪烁问题。
• 给滚动事件加了100ms防抖，每次触发滚动时先清除上一个未执行的定时器，避免多个回调排队执行。
• 修正了点击事件的绑定范围，锚点点击不再触发导航状态切换，同时增加了手动操作保护期，避免用户手动切换状态后立刻被滚动逻辑覆盖。
• 初始化时主动执行一次滚动状态判断，避免页面刷新时初始滚动位置不在顶部但导航仍展开的问题。

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