Элементы прыгают по экрану без остановки, когда элемент находится на краю пересечения (Intersection Observer) ⇐ CSS

[Anonymous]

У меня есть страница с липким нижним колонтитулом со сложенными кнопками, когда нижний колонтитул не полностью находится в области просмотра, я скрываю одну из кнопок, когда нижний колонтитул на месте, я показываю кнопки, проблема в том, что контейнер находится на края, потому что тогда он начинает мерцать.
он ​​мерцает, потому что контейнер становится больше, когда мы добавляем вторую кнопку (когда она полностью входит в область просмотра), и поскольку он становится больше, контейнер становится больше не будет полностью виден.
Есть ли способ обойти это? Я добавил в проблему гифку и код.
https://codepen.io/felipefernand3s/pen/OJGgMOK
Я просто хочу иметь нижний колонтитул со сложенными кнопками, нижний колонтитул и одна из кнопок всегда видны, но когда нижний колонтитул закреплен (это означает, что он находится в правильном HTML-месте, а не «плавающим»), я хочу показать все сложенные кнопки.< /p>
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1) || console.log(e.intersectionRatio),
{ threshold: [0] }
);

observer.observe(el);



Подробнее здесь: https://stackoverflow.com/questions/782 ... f-being-in