Making a div disappers on scroll

Question

I am using the following method to hide a div on scroll.

My div:

<div v-if="this.scrollPosition < 20" class="container mt-3 serious">
        <h2>This is a big title</h2>            
</div>

The method I use:

 const app = new Vue({    
      el: '#app',    
      data: {
        scrollPosition: null
      },    
      methods: {
        updateScroll() {
          this.scrollPosition = window.scrollY
        }
      },    
      mounted() {
        window.addEventListener('scroll', this.updateScroll);
      }    
    })

My problem is that if I scroll slowly, the div disappears and then reappears, how can I fix this?

Answer 1

Have you tried changing v-if="this.scrollPosition < 20" to maybe another value like 15?