VueJS：スクロール位置の後にCSSクラスを動的に変更する方法

Question

vueJsとbootstrapでwebappを作成しています。スクロールの特定の量の後の要素のchange CSS classにしたい、それを行ういくつかのvueの方法はありますか？

は、私は次のような何かをしたい：私が見つけ

<div :class="{classA: scrollPosition < 100, classB: scrollPosition > 100}"> 
</div> 

1つのオプションは、有望と思われるvue-scroll、しかしnot workingを使用することです。

同じように他のネイティブな方法がありますか？

Answer 1

あなたはまたのEventListenerを削除するに破壊する可能性があり、この

const app = new Vue({ 

    el: '#app', 

    data: { 
    scrollPosition: null 
    }, 

    methods: { 
    updateScroll() { 
     this.scrollPosition = window.scrollY 
    } 
    }, 

    mounted() { 
    window.addEventListener('scroll', this.updateScroll); 
    } 

}) 

ようにそれを作ってみることができ、このような何か：

destroy() { 
    window.removeEventListener('scroll', this.updateScroll) 
}