缩小粘性粘性标题会导致 Blink/Webkit 在某些滚动位置闪烁

Question

我有一个粘性标题，用于IntersectionObserver在卡住时获得一个类，然后隐藏一些元素并减小徽标的大小。当然，当标题的高度缩小时，滚动高度也会缩小，因此，如果您向下滚动到足以缩小标题，它就会缩小，然后意识到它不再卡住，因此会增长，但这会导致它再次缩小，所以它会增长，如此无限循环。这似乎在 Chrome 中最令人震惊，但我在 Firefox 中也看到过这种情况（尽管 Firefox 似乎能够识别发生了什么并自行解决）。

我已经尝试了很多事情，包括在setTimeout()类被删除时延迟，margin-bottom在缩小时添加与标题等效的内容，显示带有height缩小空间的隐藏元素，但似乎没有什么可以解决这个问题。

我知道我以前也在其他网站上看到过这种情况，我怀疑这只是缩小标题的系统性问题，但我能做些什么来防止这种情况发生吗？我没主意了。

const OBSERVER = new IntersectionObserver(
    ([e]) => e.target.classList.toggle("js-is-sticky", e.intersectionRatio < 1),
    {
        rootMargin: document.getElementById("wpadminbar") ? "-32px 0px 0px 0px" : "0px 0px 0px 0px",
        threshold: [1],
    }
);

OBSERVER.observe(document.querySelector(".sticky-block"));

CSS 和标记有点复杂（并且稍微不相关），因此如果需要，请参阅我们的演示网站。https://gepl.myweblinx.net/

如果需要其他任何内容，我很乐意添加。

编辑1：我看到这个答案建议在保留正确高度的元素周围放置一个容器，但这不起作用，position: sticky;因为position: sticky;仅适用于最近的容器（除非有人知道如何解决这个问题？）

编辑2：我对第一次编辑的答案想得太多了

Answer 1

嗯，这是一个令人惊讶的明显解决方案......感谢这个答案，我能够弄清楚，如果我只是在粘性元素上设置固定高度，但让该元素的内容缩小，问题就会消失。

本质上：

<div class="sticky-block" style="height:140px;">
    <div class="header-block">
        ...
    </div>
    <div class="navigation-block">
        ...
    </div>
</div>