StudioTOP>スクロールしても消えないナビゲーションを導入スクロールしても消えないナビゲーションを導入スクロールしても消えないナビゲーションを導入(ナビゲーションを固定する)今回はスクロールしても消えない上部で固定されたメニューバー(ナビゲーション)を導入する依頼を受けたので、ここに記録いたします。そこで候補として二つの「jQuery」の導入を検討しました。Scroll」というjQueryで、詳しくは下記に掲載されています。導入する場合は詳しく書いているのでオススメのサイトです。動作確認をした結果、ピタリとスムーズな固定をしようとすると、ブラウザによってはカクカクしてしまうので使えませんでした。用途としてはアフェリエイトなどの後からついて来るアニメーションタイプのサイドバナーを作る場合などに、丁度いいjQueryだと思います。次に「stickUp」というjQueryの動作を確認したところ、これが理想的な動作だったので導入する事にしました。plugin」ちなみに紹介している二つのjQueryはオープンソース(使用可能)になっています。提供サイトでは詳しい使い方が載っているのですが、英語なので..。多様なカスタマイズが可能で、しかもwordpressにも使用可能というわけで、かなり使い勝手がいいjQuerとのことらしいです。使い方を詳しく書いているサイトとしては下記の二つのサイトが分かりやすくて参考になります。最初のサイトではダウンロードしてサイトに入れ込む方法が詳しく書いてあります。二番目は、提供サイトのファイルをリンクして使う方法が載っています。今回はアップデートが多いjQueryなので、アップデート時に誤作動が起きないようにサイトに組み込むタイプを導入しようと思います。ファイルのダウンロードは下記のサイトが紹介しております。同時に簡単な解説もしてあるのでダウンロードする時に参考にしてください。※stickUpはjQuery/JavaScript製、LGPLのオープンソース・ソフトウェアです。menus.ダウンロードを済ませたら、ZIPファイルを解凍して以下のファイルをサイトに組み込みましょう。色々なファイルがありますが、必要なのは「stickUp.js」「stickUp.min.js」の2つのjsファイルで、JavaScriptやPHPと同じ階層に「jQuery」ファイルを作ってアップロードするとスッキリするかもしれません。「jQuery」を作動するファイルがない場合は下記のファイルをダウンロードして同じくアップロードしてください。上記をjQueryを使用するためのファイルです。jQueryを使っているサイトであれば、アップする必要はありませんが、動作しない場合はアップしてみてください。次にhaed部のmetaタグ部に以下を記入、またはコピペして、任意の箇所を自サイトの階層に合わせて書き換えましょう。インデックスと同じ階層にある場合は、ファイル名だけです。src="任意/stickUp.min.js"></script>これで導入の準備か完了しました。次にhaedのmeta部にスクリプトを次のように記入して、「ここにID名やクラス名を入れる」の箇所に固定してたいブロックのIDやクラスを書きます。class&ID$('#nav').stickUp();});});</script>上記は、navというIDのついたタグを指定したという意味です。このjQueryは、アクティブ中の動作の仕方などCSSと連動して色々とカスタマイズできるようで、javascriptやphpが得意な方には、かなり使い勝手が良さそうです。今回は一部背景と共にナビゲーションを固定する依頼だったので、「ナビ」と「ナビの背景」と「それを包みブロック」にIDをつけることで理想的な動作を実現する事ができました。id="nav">これが固定する為のブロック<div>ココがナビの背景<nav>ココがナビゲーション</nav></div></div>背景のタグに「stickUp」のIDを付ければ早いような気がしますが、もう一つタグで囲まないと、アクティブ時に左寄りになってしまう現象とフッターがプルプルする不具合異が出てしまい上記で対応しました。システムが得意な方には制御できるような気がしますが、今回は触りすぎて誤作動の原因ならないよう対処いたしました。以上、「スクロールしても消えないナビゲーションを導入(ナビゲーションを固定する)」でした。Reserved.天城スタジオ。