Обнаружение позиции: липкое, как застряло, когда событие изменяет содержимое липкого элемента ⇐ Javascript

[Anonymous]

Последующее наблюдение по этому вопросу
Мой вариант использования влечет за собой наличие липкого элемента, и преобразование его в более компактную/усеченную форму, когда он «застрял» в верхней части области прокрутки.
Существует ряд рабочих методов для стрельбы, когда элемент «застрял». является полуэкспериментированной ошибкой, когда выпущенное событие меняет высоту липкого элемента. Это может вызвать бесконечную петлю /тупик, когда Scrolltop регулирует, когда липкий элемент сжимается, что заставляет recsectionObserver снова и снова стрелять в заикание, или он просто имеет тенденцию сбрасывать позицию прокрутки. />

Код: Выделить всё

// get the sticky element
const stickyElm = document.querySelector('header')

const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
{threshold: [1]}
);

observer.observe(stickyElm)< /code>
body{ height: 200vh; font:20px Arial; }

section{
background: lightblue;
padding: 2em 1em;
}

header{
position: sticky;
top: -1px;                       /* ➜ the trick */

padding: 1em;
padding-top: calc(1em + 1px);    /* ➜ compensate for the trick */

background: salmon;
transition: .1s;
}

/* styles for when the header is in sticky mode */
header.isSticky{
font-size: .8em;
opacity: .5;
}

header.isSticky span, header.isSticky br{
display: none;
}< /code>
Space

Wide Content
Wide Content
Wide Content
Wide Content
Wide Content
Wide Content
Sticky Header
More Content
More Content
More Content
More Content
More Content

Space

Space

Space

Подробнее здесь: https://stackoverflow.com/questions/796 ... f-the-stic