プログラミング独学day54の学習で、得たことや気づきを教えて！
今日は
・【jQuery】スクロールしても上部に固定されるヘッダー
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！
→プログラミング学習day54、もりけん塾day10
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【jQuery】スクロールしても上部に固定されるヘッダー
今日のアウトプットはjQueryです。
→「jQuery標準デザイン講座」本の制作レッスン25。
“スクロールしても上部にヘッダーが固定されたまま”という実装は頻出！
なので、くわしくアウトプットしてみます。
完成物
このように下にスクロールしていっても、ヘッダーのnav部分が上部に固定されています。
よくみるスタイルですね。
構成
jQueryでコードを書くまえに、構成を考えます。
①スクロール量を取得する
②スクロール量によってヘッダーの位置を固定or戻す
構成はシンプルです。
→scrollTopでスクロール量を測定、ヘッダーの位置を固定はposition: fixedなど事前に想像もしやすい！
htmlはこのようになっています
<nav>に<li>でメニューが並んでいる構成です。
上部に固定されるヘッダーを実装していきます
構成に沿って、実装していきます。
構成① スクロール量を取得する
まず、ブラウザをスクロールさせます
セレクタはwindowです。
” “で囲まないように注意！(数分エラーで悩みました…w)
.scroll()メソッドのなかに関数を書いて、スクロールしたときの処理をおこないます。
次に、スクロール量を取得して、nav要素の「初期位置」と比較。
→まず、「初期位置」を変数に代入しておきましょう！
＊変数とは、同じ値をくり返し使うための「箱」のようなものでした。
セレクタのnavの最初の位置は、offset()メソッドで取得できます。
offset()メソッドとは？
→ページの左上を起点に、セレクタの位置(座標！)を取得できる
(引用：jQuery標準デザイン講座 )
→offset().left や offset().top とすることで、left/topそれぞれからの位置を取得することもできます。
構成② スクロール量によってヘッダーの位置を固定or戻す
positionプロパティとは？
→要素の位置を決めるプロパティのこと
position: fixed セレクタの位置を「固定」
position: static セレクタの位置を「通常に」
あとがき
もりけんさんのHPはこちら
