Shrinking sticky sticky header causes flicker in Blink/Webkit at certain scroll positions

I have a sticky header which utilizes IntersectionObserver to gain a class when stuck, which then hides a few elements and reduces the size of the logo. Of course, when the height of the header shrinks, so does the scroll height, and so if you scroll down just enough to shrink the header, it shrinks, then realizes it's no longer stuck so grows, but that cause it to shrink again, so it grows, and so on in an infinite loop. This seems to be most egregious in Chrome, but I've seen it happen in Firefox as well (though Firefox seems to recognize what's happening and sorts itself out).

I've tried numerous things, including a setTimeout() to delay when the class gets removed, adding equivalent margin-bottom to the header when it shrinks, displaying a hidden element with a height of the shrunk space, but nothing seems to fix this problem.

I know I've seen this on other sites before as well, and I suspect this is just a systemic problem with shrinking headers, but is there anything I can do to prevent this from happening? I'm out of ideas.

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 and markup is a bit more complicated (and slightly irrelevant), so if needed, please refer to our demo site here. https://gepl.myweblinx.net/

If anything else is needed I'd be happy to add it.

EDIT 1: I see this answer suggests putting a container around the element that retains the correct height, but that won't work with position: sticky; as position: sticky; only works for the closest container (unless someone knows how to get around this?)

EDIT 2: I was overthinking the answer from my first edit

Well, that was a surprisngly obvious solution... Thanks to this answer, I was able to figure out that if I just set a fixed height on the sticky element, but let the contents of that element shrink, the issue goes away.

Essentially:

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