スクロールしても消えないナビゲーションを導入

スクロールしても消えないナビゲーションを導入

(ナビゲーションを固定する)

  今回はスクロールしても消えない上部で固定されたメニューバー(ナビゲーション)を導入する依頼を受けたので、ここに記録いたします。 そこで候補として二つの「jQuery」の導入を検討しました。

 

一つ目は「Contained Sticky Scroll」というjQueryで、詳しくは下記に掲載されています。 導入する場合は詳しく書いているのでオススメのサイトです。
スクロールしても自動で付いてくるサイドバーを作る 動作確認をした結果、ピタリとスムーズな固定をしようとすると、ブラウザによってはカクカクしてしまうので使えませんでした。 用途としてはアフェリエイトなどの後からついて来るアニメーションタイプのサイドバナーを作る場合などに、丁度いいjQueryだと思います。

 

次に「stickUp」というjQueryの動作を確認したところ、これが理想的な動作だったので導入する事にしました。 提供サイトは 「stickUp a jQuery plugin」

st01

ちなみに紹介している二つのjQueryはオープンソース(使用可能)になっています。

 

提供サイトでは詳しい使い方が載っているのですが、英語なので‥。
つまり多様なカスタマイズが可能で、しかもwordpressにも使用可能というわけで、かなり使い勝手がいいjQuerとのことらしいです。
使い方を詳しく書いているサイトとしては下記の二つのサイトが分かりやすくて参考になります。

 

位置を固定したメニューを作るjQueryプラグイン「stickUp」スクロールしても常にナビゲーションメニューが上部に固定されるjQueryプラグイン「stickUp」 最初のサイトではダウンロードしてサイトに入れ込む方法が詳しく書いてあります。

 

二番目は、提供サイトのファイルをリンクして使う方法が載っています。 今回はアップデートが多いjQueryなので、アップデート時に誤作動が起きないようにサイトに組み込むタイプを導入しようと思います。

 

「stickUp a jQuery plugin」 ファイルのダウンロードは下記のサイトが紹介しております。

 

 「stickUp スクロールするとウィンドウ上部に貼り付くメニュー 」 同時に簡単な解説もしてあるのでダウンロードする時に参考にしてください。

 

※stickUpはjQuery/JavaScript製、LGPLのオープンソース・ソフトウェアです。※ ダウンロードサイトは
stickUp a jQuery Plugin for sticky navigation menus.

st02

 ダウンロードを済ませたら、ZIPファイルを解凍して以下のファイルをサイトに組み込みましょう。

st03

  色々なファイルがありますが、必要なのは「stickUp.js」「stickUp.min.js」の2つのjsファイルで、JavaScriptやPHPと同じ階層に「jQuery」ファイルを作ってアップロードするとスッキリするかもしれません。
もし「jQuery」を作動するファイルがない場合は下記のファイルをダウンロードして同じくアップロードしてください。 jqueryに必要なファイル 上記をjQueryを使用するためのファイルです。
元々jQueryを使っているサイトであれば、アップする必要はありませんが、動作しない場合はアップしてみてください。

 

 
次にhaed部のmetaタグ部に以下を記入、またはコピペして、任意の箇所を自サイトの階層に合わせて書き換えましょう。 インデックスと同じ階層にある場合は、ファイル名だけです。

<script src="任意/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="任意/stickUp.js"></script>
<script type="text/javascript" src="任意/stickUp.min.js"></script>

これで導入の準備か完了しました。 次にhaedのmeta部にスクリプトを次のように記入して、「ここにID名やクラス名を入れる」の箇所に固定してたいブロックのIDやクラスを書きます。

<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class
$('ここにID名やクラス名を入れる').stickUp();
});
});
</script>

例えば”nav”というIDのタグであれば‥

<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class&ID
$('#nav').stickUp();
});
});
</script>

上記は、navというIDのついたタグを指定したという意味です。 このjQueryは、アクティブ中の動作の仕方などCSSと連動して色々とカスタマイズできるようで、javascriptやphpが得意な方には、かなり使い勝手が良さそうです。

 


今回は一部背景と共にナビゲーションを固定する依頼だったので、「ナビ」と「ナビの背景」と「それを包みブロック」にIDをつけることで理想的な動作を実現する事ができました。 つまり‥

<div id="nav">
これが固定する為のブロック
	<div>
	ココがナビの背景
		<nav>
		ココがナビゲーション
		</nav>
	</div>	
</div>

背景のタグに「stickUp」のIDを付ければ早いような気がしますが、もう一つタグで囲まないと、アクティブ時に左寄りになってしまう現象とフッターがプルプルする不具合異が出てしまい上記で対応しました。
システムが得意な方には制御できるような気がしますが、今回は触りすぎて誤作動の原因ならないよう対処いたしました。

 

以上、「スクロールしても消えないナビゲーションを導入(ナビゲーションを固定する)」でした。

Lancers.jp