TOP>忘備録ナビゲーションをスクロールで固定化する2018年4月24日HTMLの装飾には、見た目のビジュアル面と、機能の動的部分があります。ビジュアル面は文字通りデザインによる装飾ですが、動的な装飾には技術がいるものです。動的な装飾はインパクトがることと、ユーザビリティの向上を図ることができます。今回のナビゲーションをスクロールで固定化する動作は、一見むつかしそうですが、やってみたらそれほどソースコードも必要ではありません。忘備録として残します。このような機能装飾です。ナビの固定化処理はスタイルシートで行うスポンサーリンクこのような機能装飾です。どのようなものか、まずは見ていただければわかりやすいかと思います。ナビゲーションをスクロールで固定するサンプルスクロールすると、ナビゲーション部分だけ自動で固定化され、スクロールを戻ると、ナビゲーションの固定化が自動で解除されます。コツはスクロール位置とナビゲーション位置の比較Jqueryによる固定化作業を行っているのですが、スクロールを位置を比較しているだけです。最初にナビゲーションの上からの位置を取得し、スクロール位置がナビゲーション位置を超えたら固定化しています。*/$(“nav”).removeClass(“fix”);}}});});ナビの固定化処理はスタイルシートで行うナビの位置を固定化する処理は、スタイルシートで記述しています。100%;}ナビ部分に、上記のスタイルシートを追加すると固定化されます。これをJqueryのスクロール処理と組み合わせています。JqueryのaddClass関数は、スタイルシートを追加することが可能です。逆にremoveClass関数は、スタイルシートを解除します。この関数をつかって、スクロール位置が特定位置になったら、ナビに固定化スタイルシートを追加し、スクロール位置が戻ったら固定化スタイルシートを解除しているのです。行ってしまうため、「固定スタイルシートが適用されていないときのみ適用」「固定化スタイルシートが適用されているときのみ解除」する処理をきじゅつします。具体的には、hasClass関数を使用すると、特定スタイルシートが適用されているかどうか判別できますので、その特性を利用し判断しています。思ったより簡単な割にはインパクトがありますので、ぜひ活用いただければ幸いです。今回のレポートは以上です。読んでいただいてありがとうございました。スポンサーリンクこのような記事も読まれています(広告を含んでいます)ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。鋭意ご対応申し上げます。xamppにインストールしました。UTF-8に変換しMYSQL登録で文字化けしないようにする。RAW現像で写真をより明るく綺麗に補正する。プリンタの紙詰まりが直らない原因を特定しました。officeobataシェアしていただければ嬉しいです。Tweet自社サービスの独自性を見出す方法。※ボタンをクリックすると電話がかかります。...フォームクリックで周囲が青くならないようにする。検索フォームをおしゃれに組むことはよくあることです。...白くなりすぎる写真をマニュアル適正露出で撮影する。撮影した写真を後から見てみると「白っぽい」ということがしばしばあります。...水平撮影を上手くやるコツ。撮影技術は覚えきれないぐらい沢山ありますが、基本は数えるほどしかありません。...プログラミング授業は将来なんの役にたつの?プログラマーで役に立ったこと。令和2年4月から小学校でプログラミング授業が開始されます。レスポンスではありません」となり見出しが自動下書きとなる現象に対処ワードプレスは今やホームページのツールとして一般化しています。...動物園の檻を撮影テクニックで消してみる。動物園での撮影は、基本檻越しに撮影します。...PHPフォーム送信しても、現在の表示位置をキープできるようするテクニックホームページでリンクジャンプすると、表示位置はページの先頭位置になります。賢志]ホームページにマーケティングを盛り込んだ「ビジネスホームページ」を制作、コンサルをさせていただいております。問題には原因があり、原因を解決すると成果がついてきます。本ブログはwebマーケティングに主眼を置いていますがプログラマーもしており、パソコン・ソフトに関することも書いています。