vuejs on scroll fix the side bar,

Question

 <div class="col-sm-4 my-orders-order-now">
    <div :class="{ fixed: fixedOrderPanel }">
      <FixedPannel />
    </div>
    
  </div>



data () {
  return {
    orders: [],
    loading: false,
    fixedOrderPanel: false
 }
},

mounted () {
   this.getJokes()
   if (window !== undefined && window.addEventListener) {
    window.addEventListener('scroll',() => this.handleScroll(window.scrollY));
  }

},

 destroyed: function () { //Not working

 console.log('Afore')
    if (window !== undefined && window.removeEventListener) {
         window.removeEventListener('scroll', 
              ()=>this.handleScroll(window.scrollY));

    }
},

 methods: {
   handleScroll: function(scrolled){
   console.log('scrolling')
    if (scrolled > 160) {
        this.fixedOrderPanel = true
    } else {
        this.fixedOrderPanel = false
    }

},

}

window.removeEventListener of scroll listeners still intact after destroying/ component or route change vuejs. window.removeEventListener not working whenever change the route or component even I tried both beforeDestroy() and destroyed methods to remove scroll event listener.

Possible duplicate of [Javascript removeEventListener not working](https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working) — CertainPerformance, Nov 28 '18 at 08:15
This is just the same method as listed in the canonical you were [linked to](https://stackoverflow.com/questions/53512237/window-removeeventlistener-of-scroll-listeners-still-in-tact-after-destroying-c?noredirect=1#comment93898513_53512237) last time you posted this — CertainPerformance, Nov 28 '18 at 08:15
i am giving solution for sidebar issue and without anonymous function issue, remove duplicate — D V Yogesh, Nov 28 '18 at 08:17

D V Yogesh · Answer 1 · 2018-11-28T08:25:48.470

<div class="col-sm-4 my-orders-order-now">
   <div :class="{ fixed: fixedOrderPanel }">
     <FixedPannel />
   </div>

</div>  


components: {
    FixedPannel
}, 

mounted () {
    this.getJokes()
    document.addEventListener('scroll',  this.handleScroll);
  },

 destroyed: function () {
    document.removeEventListener('scroll', this.handleScroll);

 },

 methods: {

    handleScroll: function(){
        const checkWindow = window !== undefined && window.scrollY;

        if (checkWindow && window.scrollY > 160) {
           this.fixedOrderPanel = true
        } else {
           this.fixedOrderPanel = false
       }

     const scrollFix = (scrolled) => {
        if (scrolled > 160) {

           this.fixedOrderPanel = true
         } else {
           this.fixedOrderPanel = false
        }
    }

    }
}

<style>
.fixed{
  position: fixed;
  top: 0px;
  padding: 1%;
 }

</style>

vuejs on scroll fix the side bar,

1 Answers1