Vue.jsでのスタイル操作

◆取得した値をstyleに入れる
例）スクロール位置を取得＆その値をstyleとして渡す

<div :style="{ top: scrollY + 'px' }">
　～ここにコンテンツが入ります。
</div>

<script>
export default {
    data() {
        return {
            scrollY: 0
        };
    },
    mounted() {
        // scroll位置の取得
        window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            this.scrollY = window.scrollY;
        }
    }
};
</script>

◆条件に応じてクラスを降る
例）スクロール位置を取得＆その値が条件に合っていれば“isFixed”クラスを降る

<div :class="{ isFixed: isFixed }">
　～ここにコンテンツが入ります。
</div>

<script>
export default {
    data() {
        return {
            isFixed: false
        };
    },
    mounted() {
        // scroll位置の取得
        window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            if (window.scrollY > 0) {
                this.isFixed = true;
            } else {
                this.isFixed = false;
            }
        }
    }
};
</script>