フローティングタイプのUIは、全体幅を使ったページのコンテンツやブロックを覆ってしまうので、ストレスになる為、最近そんなに見かけることがないですが、2カラムのブログの場合まだまだ使い道があります。
そんなフローティングタイプのナビゲーションを実装しようと思った際、比較的昔からあるfloater.jsを使うと簡単で、メソッドを変更するといろんな挙動を表現できるので便利です。
この記事は、そんなjQueryを使ったフローティングタイプナビゲーションについて
- フローティングナビゲーションの設置サンプル
- 実装手順。
- 使うjQueryの解説。
の内容について、解説しています。
それでは早速ご覧ください。
フローティングメニューの設置サンプル
この記事の右上に追従して表示されているものがサンプルです。メニュータイプのサンプルではなくカードのデザインですが、下部にスクロールしてもヒョイっと追従してくれます。
追従のアニメーションや位置など設定も簡単にできます。
フローティングメニューの実装手順
フローティングメニューの実装手順です。ざっくりいうとjQueryを<head>〜</head> の中へ重点的に書き込んでいく形です。
この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。
jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><head>〜</head>jQueryは必須でないと動かないので、書きこんでからコピペください。
jquery.easing.jsをダウンロードして、任意のフォルダに設置をします。設置が完了したら、以下のようにしてHTMLの<head>〜</head>の中に記述します。
その時、設置しているjQuery本体の記述の下に来るように記述します。
<script src="設置したドメイン.../jquery.easing.js"></script>続いてfloater.jsをダウンロードして、任意のフォルダに設置をします。これもjquery.easing.jsと同様、HTMLの<head>〜</head>のjquery.easing.js の下に記述します。
<script src="設置したドメイン.../floater.js"></script>HTMLの<head>〜</head>にfloaterメソッドの記述をします。以下のコードはこのページに実装しているフローティングのメソッドです。
<script>
(function($) {
$(function() {
$("#nav1").floater({
marginTop: $("#header").outerHeight() + 60,
marginBottom: $("#footer").outerHeight() + 60
});
});
})(jQuery);
</script>最後に、HTMLの<body>〜</body>の中に記述して完了です。
<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を使うと、アニメーションの動きに変化をつけることが可能になり、例えば最初はゆっくり動いて後半にかけて動きが速くなるようなアニメーションにできるプラグインです。
他にも、遅い動きと速い動きを繰り返したり、バネのようにビヨーンと伸び縮みするものを作ることも可能になります。
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」でググってください。
