jQueryのコピペでフローティングタイプナビゲーションのスニペット

フローティングタイプのUIは、全体幅を使ったページのコンテンツやブロックを覆ってしまうので、ストレスになる為、最近そんなに見かけることがないですが、2カラムのブログの場合まだまだ使い道があります。

そんなフローティングタイプのナビゲーションを実装しようと思った際、比較的昔からあるfloater.jsを使うと簡単で、メソッドを変更するといろんな挙動を表現できるので便利です。

この記事は、そんなjQueryを使ったフローティングタイプナビゲーションについて

  • フローティングナビゲーションの設置サンプル
  • 実装手順。
  • 使うjQueryの解説。

の内容について、解説しています。

かかかず
かかかず

それでは早速ご覧ください。

フローティングメニューの設置サンプル

この記事の右上に追従して表示されているものがサンプルです。メニュータイプのサンプルではなくカードのデザインですが、下部にスクロールしてもヒョイっと追従してくれます。

かかかず
かかかず

追従のアニメーションや位置など設定も簡単にできます。

フローティングメニューの実装手順

フローティングメニューの実装手順です。ざっくりいうとjQueryを<head>〜</head> の中へ重点的に書き込んでいく形です。

jQueryの記述

この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head>〜</head>
の中に無い場合その中へ貼り付けましょう。
かかかず
かかかず

jQueryは必須でないと動かないので、書きこんでからコピペください。

jquery.easing.jsのダウンロードと記述

jquery.easing.jsをダウンロードして、任意のフォルダに設置をします。設置が完了したら、以下のようにしてHTMLの<head>〜</head>の中に記述します。

その時、設置しているjQuery本体の記述の下に来るように記述します。

HTML

<script src="設置したドメイン.../jquery.easing.js"></script>

jquery.easing.jsのファイル

floater.jsのダウンロードと記述

続いてfloater.jsをダウンロードして、任意のフォルダに設置をします。これもjquery.easing.jsと同様、HTMLの<head>〜</head>jquery.easing.js の下に記述します。

HTML

<script src="設置したドメイン.../floater.js"></script>

floater.jsのファイル

floatingメソッドの記述

HTMLの<head>〜</head>にfloaterメソッドの記述をします。以下のコードはこのページに実装しているフローティングのメソッドです。

HTML

<script>
(function($) {
	$(function() {
		$("#nav1").floater({
			marginTop: $("#header").outerHeight() + 60,
			marginBottom: $("#footer").outerHeight() + 60
		});
	});
})(jQuery);
</script>

HTMLの記述

最後に、HTMLの<body>〜</body>の中に記述して完了です。

HTML

<div id="nav1">
<img src="https://dubdesign.net/wp-content/uploads/2021/06/lolipoporxserver_eyecatch.jpg">
<p class="nav1_p">nav1</p>
</div>

使用するjQueryプラグインの解説

この記事で使用しているjQueryプラグインは2種使っています。そのプラグインについての解説です。

jquery.easing.js

jquery.easing.jsを使うと、アニメーションの動きに変化をつけることが可能になり、例えば最初はゆっくり動いて後半にかけて動きが速くなるようなアニメーションにできるプラグインです。

他にも、遅い動きと速い動きを繰り返したり、バネのようにビヨーンと伸び縮みするものを作ることも可能になります。

floater.js

floater.jsを使うと、簡単な設定でナビゲーションをスクロールに追従させることができるようになります。

以下のように設定できる種類と効果があります。

設定項目効果
margin top:上の余白
margin bottom:下の余白
agility:0〜1で0.4等小数点での設定も可能。
speed:アニメーションにかける時間
easing:動きの加減速。jQuery単体だと2個しか指定できませんが、jquery.easing.jsを入れると20個以上になります。
fixed:trueでfixed。初期値はfalse。
かかかず
かかかず

easingの設定は数が多く書ききれないので、詳細は「easing」でググってください。

レンタルサーバー