テックコード -web関連の情報サイト- 
ウェブサイトを閲覧する際に、ヘッダーがスクロールに応じて追従するデザインはよく見かけます。これにより、ナビゲーションバーが常に画面の上部に表示されるため、ユーザーの利便性が向上します。この記事では、純粋なJavaScriptを使って、スクロールに応じてヘッダーが追従するアニメーションのいくつかの実装方法をご紹介します。
See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.
1. シンプルな固定ヘッダー
まず、最も基本的なヘッダーの固定方法を見てみましょう。これはCSSだけで実現可能です。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background: #333;
color: white;
padding: 10px 0;
text-align: center;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.content {
padding: 100px 20px;
}
</style>
</head>
<body>
<header id="header">Sticky Header</header>
<div class="content">
<p>Scroll down to see the header stick to the top.</p>
<p>Lorem ipsum dolor sit amet...</p>
<!-- Add more content here to enable scrolling -->
</div>
</body>
</html>
説明
この方法では、position: fixed;を使用してヘッダーを画面の上部に固定します。これにより、ユーザーがスクロールしてもヘッダーは常に表示され続けます。特にJavaScriptを使わず、CSSだけで実装できるため簡単です。
2. スクロールに応じたヘッダーのクラス変更
次に、スクロール位置に応じてヘッダーのスタイルを変更する方法を紹介します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header with Scroll</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background: #333;
color: white;
padding: 10px 0;
text-align: center;
width: 100%;
position: fixed;
top: -50px;
left: 0;
transition: top 0.3s;
z-index: 1000;
}
.sticky {
top: 0;
}
.content {
padding: 100px 20px;
}
</style>
</head>
<body>
<header id="header">Scroll Header</header>
<div class="content">
<p>Scroll down to see the header change its position.</p>
<p>Lorem ipsum dolor sit amet...</p>
<!-- Add more content here to enable scrolling -->
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
window.onscroll = function() {
const header = document.getElementById("header");
if (window.pageYOffset > 50) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
};
説明
この方法では、ユーザーがスクロールするとJavaScriptがheader要素にstickyクラスを追加または削除します。stickyクラスの追加により、CSSで定義されたtop: 0;スタイルが適用され、ヘッダーが画面の上部に固定されます。
3. スクロールに応じたヘッダーのサイズ変更
最後に、スクロールするとヘッダーの高さが変わるアニメーションの方法を紹介します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header on Scroll</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
transition: padding 0.3s;
}
.shrink {
padding: 10px 0;
}
.content {
padding: 100px 20px;
}
</style>
</head>
<body>
<header id="header">Responsive Header</header>
<div class="content">
<p>Scroll down to see the header shrink.</p>
<p>Lorem ipsum dolor sit amet...</p>
<!-- Add more content here to enable scrolling -->
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
window.onscroll = function() {
const header = document.getElementById("header");
if (window.pageYOffset > 50) {
header.classList.add("shrink");
} else {
header.classList.remove("shrink");
}
};
説明
この方法では、ユーザーがスクロールすると、JavaScriptがheader要素にshrinkクラスを追加または削除します。shrinkクラスの追加により、CSSで定義されたpaddingスタイルが変更され、ヘッダーの高さが縮小されます。
結論
これらの方法を使用すると、スクロールに応じてヘッダーが追従するアニメーションを簡単に実装できます。プロジェクトの要件に応じて、最適な方法を選んでください。さらにカスタマイズすることで、より高度なインタラクションやエフェクトを追加することも可能です。是非、試してみてください！
