読者コピペでOK!スクロールに追従するメニューの実装は、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、コピペでOK!スクロールに追従するメニューの実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
スクロールに応じて、メニューが表示されたり非表示になるように実装します。これは、このページのヘッダーメニューが行っている動作と同様です。コード
javascriptfunction fixedHeader() {
let fixedElm=document.querySelector(".header");
let scrollPoint=0;
let lastPoint=0;
window.addEventListener("scroll", function() {
scrollPoint=this.window.scrollY;
if (scrollPoint > lastPoint) {
fixedElm.classList.add("fixed-hide");
}
else {
fixedElm.classList.remove("fixed-hide");
}
lastPoint=scrollPoint;
});
}
fixedHeader().fixed-hide {
transform: translateY(-100px);
}.header {
transition: 0.5s;
}実装内容で押さえたいポイント
実装内容は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
実装前に確認しておきたいこと
ここでは、コピペでOK!スクロールに追従するメニューの実装を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。
作業の目的と変更範囲を決める
対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。
元の状態へ戻せるようにする
テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。
よくあるつまずきと確認方法
コピペでOK!スクロールに追従するメニューの実装が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。
変更が反映されない場合
保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。
公開前の最終確認
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
まとめ
- 実装にはthis.window.scrollYを理解する
- if文で条件分岐を作成し、スクロール量及び方向によってイベントを発火させる
- 条件を満たしたときにクラスが付与され、条件が元に戻ったときにはそのクラスが解除される。
MEMBER COMMENTS
コメント（0件）