ウェブサイトをブラウジングしていると、スクロール途中でヘッダーが固定される動作をよく見かけます。この機能は、ユーザーがページをスクロールしても重要なナビゲーションや情報を常に表示するために役立ちます。今回は、HTML、CSS、JavaScriptを使って、このスクロール途中でヘッダーが固定される機能を実装する方法について解説します。
1. HTMLの構造
まずは、シンプルなHTMLの構造を作成します。ヘッダーとコンテンツ部分を作り、ヘッダーがスクロール時に固定されるようにします。
htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールで固定されるヘッダー</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<h1>スクロール固定ヘッダー</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>コンテンツタイトル1</h2>
<p>ここにコンテンツが入ります。長めのテキストを入れてスクロールを確認しましょう。</p>
</section>
<section>
<h2>コンテンツタイトル2</h2>
<p>さらに多くのコンテンツを追加して、スクロールが必要な長さにします。</p>
</section>
<!-- さらにコンテンツを追加 -->
</main>
<script src="script.js"></script>
</body>
</html>
解説
<header>タグはページの最上部に配置される部分で、ここにナビゲーションリンクを含めました。<main>タグには複数のセクションを作成し、コンテンツを入れています。
2. CSSでのスタイリング
次に、CSSでヘッダーとコンテンツのスタイリングを行い、スクロール時にヘッダーが固定されるようにします。
cssコードをコピーするbody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: top 0.3s;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 15px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 100px 20px 20px 20px;
}
section {
margin-bottom: 40px;
}
解説
position: fixed;を使用することで、ヘッダーがスクロール時にも画面の上部に固定されます。z-index: 1000;を設定することで、他の要素よりも前面に表示されるようにしています。transition: top 0.3s;は、ヘッダーの表示/非表示がスムーズに行われるように設定しています。
3. JavaScriptでの動的なヘッダー動作
最後に、JavaScriptを使ってスクロールに応じたヘッダーの動きを制御します。
javascriptコードをコピーするwindow.onscroll = function() {
var header = document.getElementById("header");
var scrollPosition = window.pageYOffset;
if (scrollPosition > 50) {
header.style.top = "0";
} else {
header.style.top = "-60px";
}
};
解説
window.onscrollイベントを使用して、ユーザーがスクロールするたびにコードが実行されます。- ヘッダーの初期位置を
top: -60pxに設定し、スクロール位置が50ピクセルを超えたらtop: 0に変更することで、ヘッダーが上からスライドしてくるようにしています。
まとめ
このようにして、スクロール途中でヘッダーが固定されるウェブサイトの作成が可能です。ユーザーの体験を向上させるために、この技術は非常に有効です。ぜひ、あなたのプロジェクトでも活用してみてください。
(Visited 2 times, 1 visits today)