morobrand画面上をスクロールした際に、メインとなるナビゲーションを常に画面の一番上に表示される形をとりたい時の簡単な方法をご紹介します。常に他のページへのリンクが可能になるので便利ですが、あまり高さを取りすぎてしまうとコンテンツ部分が見える範囲が必然的に狭くなってしまうので、可視エリアを配慮しながら利用したほうがいいかもしれません。サンプルをご確認ください。DEMO※スクロールすると画面の上部にメニューが固定表示されるかと思います。それでは見ていきましょう。1.HTMLを記述サンプルとして、liタグで横幅25%に指定しfloatさせることで4つのメニューを配置。最後の.fixedというクラス名で固定する指示。fixed;}3.jQuery本体とJavaScriptを読み込むJavaScriptの詳細は後述しますが、以下のようなJavaScriptを読み込んでください。{nav.removeClass('fixed').css('top',-navTop+'px');}});});</script>これでOKです。ここからは、余談になりますが折角なので、先ほど読み込んだJavaScriptをちょっと突っ込んで見てみましょう。Script部分は以下のようなコードになっていて、アンダーラインを引いてある部分にjQueryの「イベント関数」というものが書いてあります。jQuery及びJavaScriptに詳しい方であれば簡単なコードだと思いますが、正直よくわかっていないよって方でも少し理解出来るように見ていきたいと思います。先に「.offset()」イベントを確認.offset()指定した要素のドキュメント上での表示している位置の値を返します。戻り値は「top」と「left」の2つの数値を持ち、可視状態にある(見える状態にある)要素に対してのみ有効です。先ほどのScriptを上から順に見ていくと、変数「nav」に「#fixed-navi」を代入して、もうひとつの変数「navTop」に変数「nav」=「#fixed-navi」の位置(画面上部から要素までの距離)を代入しています。#fixed-naviの画面上部からの距離その後に「.scroll()」イベントが出てきます。.scroll()scrollイベントは、文書がスクロールした際に呼び出されます。$(window).scroll(function(){...})で、ウィンドウがスクロールされたら{...}を実行するという意味になります。.scrollTop最初の要素の現在のスクロール上の上位置を取得します。変数「winTop」に「this(ここでいうthisはウィンドウのこと)」のスクロール値を代入してここから「if文」に突入しています。navTop){B...}もし「winTop」の値が「navTop」の値以上であれば{A...}を実行する。なくてもし「winTop」の値が「navTop」の値未満であれば{B...}を実行するということになります。{A...}と{B...}の内容ですが、まずは{A...}は、nav.addClass(‘fixed’).css(‘top’,0);という一文ですが、変数「nav」に対してクラス名「.fixed(‘top’,0)」を”add=追加”しています。.addClass()指定した要素に、CSSクラスを追加します。{B...}は、nav.removeClass(‘fixed’).css(‘top’,-navTop+’px’);{A...}とは逆に、変数「nav」に対してクラス名「.fixed(‘top’,-navTop+’px’)」を”remove=削除”しています。.removeClass()指定した要素から、CSSクラスを削除します。サンプルで言うところの、変数「navTop」は“75px”になっているので、この「navTop」の値と「winTop」の値(スクロール値)を比較して、それぞれ実行する内容を変化させています。説明があまり上手くないので伝わりづらかったら申し訳ありません・・・。意味不明だと感じたらスルーしてください(悲)。関連する記事はこちらです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。reserved.当サイト内の文章・画像等の内容の無断転載及び複製等の行為はご遠慮ください。