【jQuery-35】画面をスクロールするとメニューバーだけ追従する【実践編】

メインビューの下部にメニューバーがあり、スクロールをするとそのメニューバーのみついてくるような仕組みを作ってみましょう。

かなり実践的かつ応用の幅も広いスクリプトですので、ぜひしっかり理解をしていただきたいです。

HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。

HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】   

※私は現在、プログラミングスクールにてコーディングの勉強をしています。学んだことをアウトプットして知識の定着をさせつつ、同じような境遇の人の助けになればと思いこの記事を書いています。一緒に頑張りましょう！

画面スクロール時にメニューバーだけが追従する仕組み

完成形はこんなかんじになります

See the Pen Untitled by taichi (@taichi_na) on CodePen.

大きな <h1> があり、その下にメニューバーが付いている見た目になっています。

画面をスクロールをしてみてください。画面の上端がメニューバーにくっついた段階で、メニューバーが画面の動きについていくようになります。

この段階でどのようなスクリプトなのかを想像できるようになると、jQuery 中級者だと思います。いかがでしょうか？　私はふんわりですが想像できるようになってきましたよ。

HTML, CSSからまずは見ていきましょう。

上から順に <h1> <nav> <main> と並んでいます。

<nav> の部分が、スクロールされたときに固定されるようにしたいのです。

では実際に jQuery のスクリプトを見ていきましょう！

jQuery でスクロール時の変化を実装する

See the Pen fixed menu bar by taichi (@taichi_na) on CodePen.

さて、1行ずつ確認をしていきましょう。

1. var navGo = $("nav").offset().top;

まずは変数を定義します。変数 navGo を画面上端から nav までの距離とします。

2. $(window).scroll(function(){

ウインドウがスクロールされたときに～の１行ですね。

3. if($(window).scrollTop() > navGo){

IF文ですね。条件は「スクロールされた量が navGo の値より大きかったら」となります。

navGo は最初の nav の上からの位置でしたね。

4. $("nav").css("position", "fixed");

      $("nav").css("top", "0px");

    }

上記の条件を満たした場合、nav の CSS に position:fixed, top:0px; を加えます。

これで画面の上端に固定されることになりますね。

5. else{

      $("nav").css("position", "static");

条件を満たさなかった場合、要するに nav の上端までスクロールされなかった場合か、戻ってきた場合に、position: static; で指定を解除してあげます。

これで完成ですね。もう一度動きを確認してみてください。

今回の流れは以下のようになっていました。

まずはメニューバーの最初の位置（画面上からの）を offset().top で取得

スクロール量がメニューの位置を超えた場合に、スタイルを変更し位置を固定

元の位置に戻したときには、スタイルの変更を解除してあげる

ということで、お疲れさまでした！