VueJS: How to dynamically change a CSS class after a scroll position
<p>I am creating a webapp with vueJs and <a href="https://v4-alpha.getbootstrap.com/" rel="nofollow noreferrer">bootstrap</a>. I want to <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">change CSS class</a> of an element after a particular amount of scroll, Is there some vue way of doing it.</p>
<p>I want something like following:</p>
<pre><code>&lt;div :class=&quot;{classA: scrollPosition &lt; 100, classB: scrollPosition &gt; 100}&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>One option I found is by using <a href="https://www.npmjs.com/package/vue-scroll" rel="nofollow noreferrer">vue-scroll</a>, which seems promising, but <a href="https://stackoverflow.com/questions/41096272/how-to-use-vue-scroll">not working</a>.</p>
<p>Is there some other native way as well to achive the same?</p>