【JavaScript】スクロールして要素を消す

  • 投稿日
  • 更新日
  • 著者 こまつ
  • カテゴリー Web制作

【JavaScript】スクロールして要素を消す

一定の高さまでスクロールしたらclass属性が付与され、cssが反映されて要素を消します。

サンプルでは一番下から1200pxの位置で要素が消えるように設定しています。

サンプル

コードサンプル

HTML

<section>
   <div class="box" id="bottom-off"></div>
</section>

css

section{
   height:300vh;
}

.box{
   position:fixed;
   height:200px;
   width:200px;
   background:red;
}

.hidden{
   opacity:0;
   transition: all 1s ease-out;  
}

JavaScript

const allHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

const hiddenPosition = allHeight - window.innerHeight;

window.addEventListener('scroll', ()=> {
   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   if (scrollTop >= hiddenPosition - 1200) {
   document.getElementById("bottom-off").classList.add("hidden");
    }
});

pickup