[Vue.js]スティッキーヘッダーをvue-sticky-directiveを使って作成
CDN経由で簡単に実装
画面をスクロールするとメニューが追従してくるものがあります。このような動きをするものをスティッキーヘッダーもしくはフローティングメニューと呼びます。フローティングの方がイメージしやすいですが、このブログではスティッキーヘッダーという呼称で統一させて頂きます。
今回はVueのライブラリ「vue-sticky-directive」を利用してスティッキーヘッダーを作成したいと思います。
ここではコンポーネントを作るほどではない小規模なサイトを想定しVue CLIを利用せず、CDN経由でvue-sticky-directiveを読み込みます。
作成にあたって次のサイトを参考にさせて頂きました。
vue-sticky-directive
vue-sticky-directiveの読み込み
ソース元
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-sticky-directive@0.0.10/vue-sticky-directive.min.js"></script> |
公式サイトよりCDNのURLを取得します。今回利用するバージョンは現時点(2021.09.21)で最新のver0.0.10です。
Vue.jsより後に読み込みます。
トップに固定する場合
See the Pen vue-sticky-top by nanase webdesigner (@nanase-777) on CodePen.
HTML
|
1 2 3 |
<nav v-sticky sticky-offset="{top: 0}" sticky-z-index="20"> <p>Sticky</p> </nav> |
まずスティッキーヘッダーにしたい要素にv-stickyを設定します。
そしてsticky-offsetで固定したい位置を指定します。今回は最上部なのでtop:0とします。（デフォルト値が0なので無くても良いが可読性を上げるため敢えて設定）sticky-z-indexはcssのz-indexの値なので任意の値を設定します。
サンプルではスティッキーヘッダー本体の上に<header>要素があるので、top:0にたどり着くまでは他の要素と一緒にスクロールされます。
sticky-offset
記入例：{top: 10, bottom: 20}
スティッキーの表示位置を設定する
| 引数 | 説明 |
|---|---|
| top | 数値。ウインドウ画面の上からの距離を指定。デフォルト値：０。 |
| bottom | 数値。ウインドウ画面の下からの距離を指定。デフォルト値：０。 |
下部に固定する場合
See the Pen vue-sticky-bottom by nanase webdesigner (@nanase-777) on CodePen.
HTML
|
1 2 3 |
<nav v-sticky sticky-offset="{bottom: 0}" sticky-side="bottom" sticky-z-index="20"> <p>Sticky</p> </nav> |
固定位置を画面下部にしたいのでsticky-offsetにはbottom:0と設定します。そしてここで新しく出てくるのがsticky-sideです。sticky-sideはtopとbottomのどちらに固定するか決めるオプションです。
デフォルトがtopなので、bottomに指定し直します。bothについては次の項目で紹介します。
またスティッキーヘッダー本体の記述をなるべく下の方にします。そうすることで本体にスクロールがたどり着くまでスティッキーヘッダーが下部に固定されます。本体までスクロールがくると、他の要素と一緒にスクロールされていきます。
sticky-side
topとbottomどちらに固定するか指定する
| 引数 | 説明 |
|---|---|
| top | topの位置で固定。デフォルト値。 |
| bottom | bottomの位置で固定。 |
| both | topとbottomの位置を共に利用する。 |
中間に表示する場合
See the Pen vue-sticky-both by nanase webdesigner (@nanase-777) on CodePen.
HTML
|
1 2 3 |
<nav v-sticky sticky-offset="{top: 30, bottom: 30}" sticky-side="both" sticky-z-index="20"> <p>Sticky</p> </nav> |
スティッキーヘッダーの有効範囲は<header>、<footer>以外の要素、#appで囲んだ範囲内にしました。top:30、bottom:30としsticky-sideはbothとすることで上下両方で固定されます。
「上下両方で固定」というのが分かりづらいと思うのでサンプルを元に説明をします。
サンプルではスティッキーヘッダーをdiv要素で挟んでいます。
スティッキーヘッダー本体にスクロールがたどり着くまではbottom:30の位置で固定され、本体を通り過ぎたあとはtop:30で固定される仕組みとなっています。そして#appの最下部まで来ると他の要素と一緒にスクロールされていきます。
スティッキーヘッダー本体を記述する位置によって応用が効きそうです。
以上でスティッキーヘッダーの作成ができました。
資料が少ないので理解までに苦労しましたが、単純に追従するだけのものならばこのライブラリだけで十分かなという印象を受けました。
ここにフェードイン等のアニメーションを入れるとなると別の方法を模索する必要がありそうです。
