最近スクロールで追従するヘッダーがスタンダードかってほど見かけるようになりました。
グローバルナビゲーションを常に表示させることでページのどこにいても見たいページにアクセスできて、ユーザーとしては欲しい情報を探しやすくサイト運営者としては回遊性を高めやすい手法だと思います。
でも追従するヘッダーって時にはユーザーの閲覧の邪魔になってしまうんですよね。
常にメインコンテンツの一部をヘッダーで隠していることになって、画面サイズの小さいノートPCやスマートフォンだと余計に見づらくなりやすく、メインコンテンツの魅力が十分に伝えられなかったり、見にくくてUXの悪化につながります。
そこで今回は、下スクロール時は非表示、上スクロール時に表示させるようなスクロールの向きに合わせて要素を変化させる方法をご紹介します。
基本のコード
説明用なのでHTMLはかなりシンプルになっています。
<div class="header">
スクロールで非表示
</div>以下はJavaScriptです。
// 現在の位置を保持
let currentPosition = 0;
// ヘッダーの高さを取得
const header = document.querySelector(".header");
const headerHeight = header.clientHeight * -1;
window.addEventListener("scroll", () => {
// スクロール位置を保持
let scrollPosition = document.documentElement.scrollTop;
// スクロールに合わせて要素をヘッダーの高さ分だけ移動（表示域から隠したり表示したり）
if (currentPosition <= scrollPosition) {
header.style.transform = "translate(0," + headerHeight + "px)";
} else if (currentPosition > scrollPosition) {
header.style.transform = "translate(0, 0)";
}
currentPosition = document.documentElement.scrollTop;
})解説
まず現在の位置を0として定義し、スクロールごとに発生するイベントによってスクロール位置を取得、現在の位置とスクロール位置を比較しています。
現在の位置の数値に対してスクロール位置の数値が大きく（下スクロール）なればヘッダーを非表示に、逆に小さく（上スクロール）なればヘッダーを再表示する仕組みです。
今回はヘッダーの高さを明確に設定していないのでJavaScriptによってヘッダーの高さを動的に取得してCSSスタイルを操作する仕様にしていますが、ヘッダーのサイズが明確ならばクラスの付け外しで表示・非表示を切り替えてもいいかと思います。
応用編
応用では上下左右にスクロールで表示・非表示が切り替わる要素を配置しています。
See the Pen
scroll to hide by mimihokuro (@mimi_hokuro)
on CodePen.
さていかがでしたでしょうか？
スクロールに合わせて要素の変化させることは使いやすさだけでなく、使いようによってはユーザーの目を引く演出も実装できそうですね。
この記事が参考になれば幸いです～。
