JavaScriptで特定の位置までスクロールした要素を固定表示する方法

2024.04.17
Tips

JavaScriptを使用して、特定の位置までスクロールした要素をposition:fixedで固定表示する方法の備忘録です。

DEMO

デモページでは、右側の「CONTACT」をページの上部までスクロールすると固定表示になりスクロールに追従します。

ページのサンプルコード

ページを構成しているコードのサンプルです。スクロールの固定に関わらない一部のコードは割愛しています。

HTML

<div class="main">
  <h1>SAMPLE MENU</h1>
  <div class="img">
    <img src="sample.jpg">
  </div>
</div>
<div class="contact">
  <div class="contact-btn"><a>CONTACT</a></div>
</div>
<div class="contents">
  <h2>TITLE SAMPLE</h2>
  <p>Lorem ipsum dolor sit ...</p>
</div>

CSS

.main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin-bottom: -140px;
}
.contact {
  position: relative;
}
.contact-btn {
  position: absolute;
  top: 0;
  right: 20px;
  width: 120px;
  height: 120px;
  z-index: 10;
}
.contact-btn a {
  display: block;
  font-size: 15px;
  font-weight: bold;
  line-height: 120px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: solid 1px #333;
}
.contents {
  margin: 0 auto;
  padding-top: 240px;
  padding-bottom: 30px;
}
.fix {
  position: fixed;
  top: 20px;
  right: 0;
  z-index: 999;
}

サイトタイトルとメインビジュアルを表示している「main」クラスは、height: 100vh;で画面の高さいっぱいに画像を表示して、margin-bottom: -140px;で「CONTACT」を画像の上に配置しています。

「CONTACT」のボタン部分に当たる「contact-btn」クラスは、position: absolute;などで画面の右下に配置しています。

「fix」クラスは、「CONTACT」を画面の右上に固定配置するための設定です。

JSの設定

続いてJSのコードを記入します。

var contactTop = $('.contact').offset().top;
function scrollFixTop() {
  var scroll = $(window).scrollTop();
  if(scroll >= contactTop) {
    $('.contact').addClass('fix');
  } else {
    if($('.contact').hasClass('fix')) {
      $('.contact').removeClass('fix');
    }
  }
};
$(window).scroll(function (){
  scrollFixTop();
});

初めに、$('.contact').offset().top;で「CONTACT」ボタンの位置を取得して、スクロール位置より下になった時、「fix」クラスを設定しています。

「fix」クラスを追加することでposition: fixed;を対応させ、「CONTACT」ボタンの表示位置を固定してスクロールに追従させます。

JSのコードは、外部ファイルで作成して読み込むか、</body>タグの直前に記入してください。