縮小粘性粘性標題會導致某些滾動位置的 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>