I'm facing a challenge with my sticky footer that contains stacked buttons. If the footer is not entirely in the viewport, I hide one of the buttons. When the footer is fully visible, all buttons should be shown. The issue arises when the container reaches the edge, causing flickering.
The flickering occurs because the container expands when the second button (that was previously hidden) appears, making it no longer fully visible on the screen.
Is there a solution to prevent this flickering effect? To better illustrate the problem, I have included a gif and provided a CodePen link below.
My goal is to maintain a footer with stacked buttons where the footer and at least one button are always visible. However, when the footer is pinned in place rather than floating, I want to display all stacked buttons.
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);