모바일 스크롤 하단 버튼 부드럽게 나타내는 방법 (CSS + JavaScript)

<div class="list-top-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="floating-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="list-top-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

<div class="floating-btns">
  <button type="button">✅ 전체선택</button>
  <button type="button">❎ 전체선택해제</button>
</div>

.floating-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(7px);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
}

.floating-btns.visible {
  opacity: 1;
  pointer-events: auto;
}

.floating-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(7px);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
}

.floating-btns.visible {
  opacity: 1;
  pointer-events: auto;
}

const header = document.querySelector(".list-top-btns");
const floatingNav = document.querySelector(".floating-btns");

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      // 헤더가 보일 때 → 플로팅 네비 숨기기
      floatingNav.classList.remove("visible");
    } else {
      // 헤더가 안 보일 때 → 플로팅 네비 보이기
      floatingNav.classList.add("visible");
    }
  },
  { threshold: 0 } // 헤더가 한 픽셀이라도 보이면 isIntersecting = true
);

observer.observe(header);

const header = document.querySelector(".list-top-btns");
const floatingNav = document.querySelector(".floating-btns");

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      // 헤더가 보일 때 → 플로팅 네비 숨기기
      floatingNav.classList.remove("visible");
    } else {
      // 헤더가 안 보일 때 → 플로팅 네비 보이기
      floatingNav.classList.add("visible");
    }
  },
  { threshold: 0 } // 헤더가 한 픽셀이라도 보이면 isIntersecting = true
);

observer.observe(header);