スクロールイベントでターゲット要素とヘッダーにクラスを付与する方法
Webページを閲覧していると、スクロール位置に応じて特定の要素が変化する
インタラクティブなデザインを目にすることが多くあります。
このような効果は、JavaScriptのスクロールイベントを利用して実現できます。
今回は、スクロールイベントを活用して特定の要素(ターゲット要素)と
ヘッダーにクラスを付与する方法を紹介します。
必要なHTML構造
まずは、基本的なHTML構造を準備します。
以下の例では、ターゲット要素としてdiv
タグ、ヘッダー要素としてheader
タグを使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールイベントのデモ</title>
<style>
header, #target {
padding: 20px;
background-color: lightgray;
margin-bottom: 20px;
}
.scrolled {
background-color: orange; /* スクロール後のスタイル */
}
</style>
</head>
<body>
<header>ヘッダー</header>
<div id="target">ターゲット要素</div>
<div style="height: 2000px;">スクロール用のスペース</div>
<script src="script.js"></script>
</body>
</html>
JavaScriptの実装
次に、スクロールイベントを監視してクラスを付与するJavaScriptコードを記述します。
このスクリプトは、スクロール位置が一定の閾値を超えた場合にクラスを付与し、
閾値以下に戻った場合にクラスを削除します。
window.addEventListener('scroll', function() {
const targetElement = document.getElementById('target');
const headerElement = document.querySelector('header'); // ヘッダー要素を取得
const scrollThreshold = 100; // スクロール距離の閾値 (100px)
// 現在のスクロール位置を取得
const scrollPosition = window.scrollY;
// 位置を判断してターゲット要素にクラスを追加または削除
if (scrollPosition > scrollThreshold) {
targetElement.classList.add('scrolled');
} else {
targetElement.classList.remove('scrolled');
}
// 位置を判断してヘッダー要素にクラスを追加または削除
if (scrollPosition > scrollThreshold) {
headerElement.classList.add('scrolled');
} else {
headerElement.classList.remove('scrolled');
}
});
コードの説明
イベントリスナーの設定
window.addEventListener('scroll', function() {
オブジェクトに対してスクロールイベントのリスナーを追加します。
このイベントリスナーは、ユーザーがページをスクロールするたびに呼び出されます。
要素の取得
const targetElement = document.getElementById('target');
const headerElement = document.querySelector('header');
スクロール位置に応じてクラスを付与するターゲット要素とヘッダー要素を取得します。
スクロール位置の取得
const scrollThreshold = 100; // スクロール距離の閾値 (100px)
const scrollPosition = window.scrollY;
スクロール位置を取得し、クラスを付与するための閾値を設定します。
クラスの付与と削除
if (scrollPosition > scrollThreshold) {
targetElement.classList.add('scrolled');
headerElement.classList.add('scrolled');
} else {
targetElement.classList.remove('scrolled');
headerElement.classList.remove('scrolled');
}
スクロール位置が閾値を超えた場合、ターゲット要素とヘッダー要素にscrolled
クラスを追加し、
閾値以下の場合にはクラスを削除します。
まとめ
このように、JavaScriptを使ってスクロールイベントを監視し、
特定の要素にクラスを動的に付与することで、インタラクティブなデザインを実現することができます。
この手法を応用することで、より魅力的で動的なWebページを作成することが可能です。
ぜひ、あなたのプロジェクトにも取り入れてみてください。
複数の画像を個別に切り替える方法
2月 12, 2025ローディングをキャッシュで制御する方法
1月 15, 2025独自のマウスカーソルを作成してウェブページを魅力的に!
1月 12, 2025