スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript

スポンサーリンク
スポンサーリンク

スクロールするとdivが表示されるには

表示サンプル

コードの説明

  • 幅800px、高さ120pxのdivを100px分スクロールすると表示するようにします。
  • スクロールするとメニューが常に上に表示されるようにしたいときなどに用います。

HTML

<div id="scrollDiv"></div>

CSS

 #scrollDiv {
  display: none;  /* 最初は表示させません */
  position: fixed;
  top: 100px;
  width: 800px; 
  height: 120px; 
  background-color: #cccccc;
}

JavaScript

window.addEventListener('scroll', function() {
  var scrollDiv = document.getElementById('scrollDiv');
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollPosition >= 100) {
    scrollDiv.style.display = 'block';
  } else {
    scrollDiv.style.display = 'none';
  }
});

仕組みの説明

  • display:noneとして、最初は表示させません。
  • JavaScriptでスクロールを検知します。
  • scrollPosition >= 100で、100px以上の時に display:block、つまり表示とします。
  • 逆に、満たさない、つまりまだ100px未満のときはdisplay:noneであり、非表示となります。
  • none指定をしておくことで、上にスクロールしたときに、再度非表示となります。
  • 100の値を変更することで表示のタイミングを変更できます。
スポンサーリンク