ある程度スクロールするとふわっと表示されるコンテンツ

こんにちは！きょうも備忘録です。
WEBページで、ある程度スクロールすると右側にふわっと出てくるサイドコントローラーとか、「TOPに戻るボタン」よく見かけますよね。
今日はそれをWordPressで実装する方法をご紹介します。

デモ

このページを試しに下にスクロールしてみてください。
ある程度スクロールすると、画面の右端に何か出てきます。

jQueryを使えば簡単に

WordPressではjQueryが最初から読み込まれていますので、簡単に実装できます。
以下のコードを、footer.php の </body> の直前あたりに追記します。

<script>
jQuery(window).on("scroll", function () {
  const scrollY = jQuery(this).scrollTop();
  const triggerPoint = 500; // スクロール値

  if (scrollY > triggerPoint) {
    jQuery(".scroll-element").addClass("active");
  } else {
    jQuery(".scroll-element").removeClass("active");
  }
});
</script>


こうすることで、「scroll-element」というclassの要素に、ページトップから500スクロールした時点で「active」というclassを付与することができます。

上記は「500以上」という指定ですが、例えば「500以上1000以下」としたい場合は以下のようなjsコードにします。

<script>
jQuery(window).on("scroll", function () {
  const scrollY = jQuery(this).scrollTop();
  const minPoint = 500;
  const maxPoint = 1000;

  if (scrollY > minPoint && scrollY < maxPoint) {
    jQuery(".scroll-element").addClass("active");
  } else {
    jQuery(".scroll-element").removeClass("active");
  }
});
</script>

注意点：WordPressで「$」を使うとエラーが出てしまうので、「$」は「jQuery」にしています。

HTMLとCSSの編集

あとは「scroll-element」に対してHTMLとCSSを編集すればOKです！
常時は「scroll-element」を非表示にしておいて、「active」が追加された場合に表示されるようにします。

HTML

<div class="scroll-element">
<p>何か出てくるよ</p>
</div>

CSS

.scroll-element {
  position: fixed;
  opacity: 0;
  transform: translateY(20px); /* 下から少し動かすムーブ */
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none; /* 非表示中はクリックできないように */
}

.scroll-element.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


opacityで表示と非表示を切り替えています。
お試しください！

ハッピーな一日になりますように