2020.9.181枚もののウェブページで表示されているコンテンツに合わせてメニューのナビゲーションが変わるというような機能要件をVue.jsで実装してみたいと思います。このような機能は以前にもjQueryで実装したまとめ(「jQueryでスクロールと連動したコンテンツナビゲーションを実装する」)にて紹介していましたが、Vue.jsではもっとわかりやすく、また双方向バインディングでテンプレート側の切り分けも簡単にできるのでこちらの方がオススメですね。それでは早速コードを見ていきます。HTMLです、今回はサンプル用としてセクションをいくつか用意し、ヘッダー部分にセクションに対応した現在のコンテンツ名を出力する部分を設けました。その部分はVue.js側で返ってきた値をそのまま表示させるためマスタッシュ記法で記述しておきます。コンテンツ5のエリアです続いて処理の部分です。今回はVue.jsで新たにインスタンスを作成する方法でまとめていますが、単一コンポーネントを使う場合でも同じになります。dataオプションに格納する値を変数として持たせておきます。ここでは縦方向のスクロール量と対象となるセクションのページトップからのY座標を配列で持たせるようにします。computedのオプションでは、現在のスクロール量からどのコンテンツの位置にいるかを調べて、条件分岐させて対象となるコンテンツ名を返すようにしています。今回はこの値をそのままテンプレートに出力しています。}});続いてmethodsオプションでは今回の機能に必要となる処理を定義しています。ここで必要になるのは「現在のスクロール量を取得」する処理と「各セクションのページトップからのY座標を取得」する処理の2つになります。Y座標を取得する処理は「getBoundingClientRect().top」で取得できますが、スクロール分を考慮しないといけないのと、小数点が発生した場合の対応も忘れず行なっておきます。最後に、DOMを操作することになるのでmountedオプションで定義した処理を実行するようにしておきます。createdオプションで実行した場合にはDOMが取得できないのでundefinedが返ってきてしまいます。これでスクロールに合わせたコンテンツナビゲーションが作成できました。今回のサンプルはこちらにあげておりますので、ぜひご参考ください。CodePen.同じ機能でもjQueryではコードが複雑になりがちですが、Vue.jsを使うことでかなり見通しが良くなりました。カスタマイズするときも楽ですね。HTMLのテンプレート側にも処理に合わせて動的に値を出力したりすることもできますので、より高度な見せ方も可能になりますね。1枚もののページを作成する場合にはぜひ試してみてはいかがでしょうか。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。