TAG
スクロールに応じて要素表示＆ページナビを設置：jQuery
シェア
ツイートデモのようにスクロールに応じて要素を表示し、
さらにページナビも連動させる方法をご紹介します。
jqueryの記述
$(document).ready(function () {
const sections = $(".section");
const navItems = $(".page-nav li");
// スクロール時にセクション表示制御
$(window).on("scroll", function () {
const scrollTop = $(this).scrollTop();
const windowHeight = $(this).height();
sections.each(function () {
const sectionTop = $(this).offset().top;
const sectionBottom = sectionTop + $(this).outerHeight();
// セクションが画面中央にあるか
if (scrollTop + windowHeight / 2 > sectionTop && scrollTop + windowHeight / 2 < sectionBottom) {
const sectionId = $(this).attr("id");
// セクションを表示
$(this).addClass("active");
sections.not(this).removeClass("active");
// ナビゲーションの該当項目をアクティブ
navItems
.filter(`[data-target="#${sectionId}"]`)
.addClass("active");
navItems.not(`[data-target="#${sectionId}"]`).removeClass("active");
}
});
});
// ナビゲーションのクリックイベント
navItems.on("click", function () {
const target = $($(this).data("target"));
if (target.length) {
// スクロールアニメーションで該当セクションに移動
$("html, body").animate(
{ scrollTop: target.offset().top },
500
);
// ナビゲーションのアクティブ切り替え
$(this).addClass("active");
navItems.not(this).removeClass("active");
// セクション表示切り替え
target.addClass("active");
sections.not(target).removeClass("active");
}
});
// 初回ロード時にスクロールイベントをトリガー
$(window).trigger("scroll");
});
HTMLの記述
<div class="page-nav">
<ul>
<li data-target="#section1">Section 1</li>
<li data-target="#section2">Section 2</li>
<li data-target="#section3">Section 3</li>
</ul>
</div>
<div class="container">
<div class="section" id="section1">Section 1</div>
<div class="section" id="section2">Section 2</div>
<div class="section" id="section3">Section 3</div>
</div>
ポイント
動作説明
スクロール連動
ページをスクロールすると、表示範囲に入ったセクションにactiveクラスが追加されます。
対応するナビゲーション項目もactive状態になります。
ナビゲーション
ナビゲーションの項目をクリックすると、該当セクションへスムーススクロールします。
スクロール終了後にactiveクラスを追加。
背景固定
background-attachment: fixed; で背景画像は固定され、セクションだけがスクロールされます。
スクロール速度調整
$("html, body").animate(
{ scrollTop: target.offset().top },
500
);
の 500 を変更して速度を調整。
JavaScriptのおすすめ参考書
ポチップ
ポチップ
