Adding Class on Scroll Vanilla JS

Question

I'm working in Vue.js and would like to conditionally display a back to top button when the user scrolls past a certain point. What am I doing wrong (no JQuery)?

In my template:

<div class="scroll">
  <span class="scroll_button">Top</span>
</div>

In my mounted() function

const toTop = document.getElementsByClassName('scroll').addEventListener('scroll', function() {
  if (window.scrollY > 0) {
    this.classList.add('shown')
  }
});
toTop();

sidewinder · Accepted Answer · 2017-06-09 20:37:49Z

2

 data () {
   return {
   scrolled: false
   };
  },
    methods: {
       handleScroll () {
       this.scrolled = window.scrollY > 0;
     }
    },
    created () {
    window.addEventListener('scroll', this.handleScroll);
    }

answered Jun 9, 2017 at 20:37

sidewinder

6824 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Beck Over a year ago

Yes! No need to touch the DOM directly, let Vue do the work. The only part of this answer that's missing is :class="{'shown': scrolled}" on the element that needs the classname added

Collectives™ on Stack Overflow

Adding Class on Scroll Vanilla JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related