More than 5 years have passed since last update.

Vue.jsで固定ヘッダ、トップへスクロールボタン

Last updated at 2019-02-15Posted at 2015-03-04

jQueryなるべく使いたくないですね。Vue.jsでなんとかしましょう。

#スクロールイベントを取る

mounted内に仕込みます。

document.onscroll = (e) => {
  this.position = document.documentElement.scrollTop || document.body.scrollTop;
}

これで、html側に、position変数を使った条件分岐を直接入れることが出来ます。

#アニメーションヘッダ

v-bind:classを使って、クラスをトグルします。
下記のように書くと、positionが0以上の時に、stickyクラスが付加されます。

<header class="header" :class="{'sticky': position > 0}">
タイトル
</header>

あとは、CSS側でアニメーション設定を行えば、スクロールでアニメーションするヘッダが作れます。

#トップへスクロールボタン

こちらも同様です。500px以上スクロールした時に表示されるようにします。
v-transitionを設定することで、.toTop.v-enterクラスが生成時に付加され、トランジションが終わった時に外れます。

//TODO v-transitionをvue 2.x～の記述に修正

<div class="toTop" v-show="position > 500" v-on="click: toTop()" v-transition>
  Jump To Top
</div>

スムーススクロールに関しては、仕方なくjQueryを使用しています。

#jQueryの代わりにVue.jsは使えるのか？

jQuery + jQuery Pluginでもできることですが、動きはCSSに、条件はHTML側に書くことで、ほとんどjsを書くことなく実現できます。
View側にロジックが入るのはあまり推奨されませんが、コード量削減の利点はそれ以上に大きいです。

Reactが大きく取り上げられていますが、個人的には、jQueryを使っていた領域でVue.jsを採用し、それより大規模開発でReactを使っていくのがいいのかな、と考えています。