I am currently utilizing nuxt.js and have implemented a scroller that scrolls and stops at a specific point on my page.
However, when I navigate to the next page, the method is still searching for the element with $ref=nav which no longer exists, resulting in an error message stating
Cannot read property 'getBoundingClientRect' of undefinedAlthough I can add the eventListener, I am facing difficulties in removing the eventListener.
Event Listener
mounted(){
window.addEventListener('scroll', this.stickyScroll);
},
beforeDestroy(){
window.removeEventListener('scroll', this.stickyScroll);
}
Scroller Function
stickyScroll(){
window.document.onscroll = () => {
let navBar = this.$refs.nav;
let navBarXPosition = navBar.getBoundingClientRect().x;
let navScrollSpy = this.$refs.navScrollSpy;
let navScrollSpyXPosition = navScrollSpy.getBoundingClientRect().bottom;
if(window.scrollY > navBarXPosition && navScrollSpyXPosition > 25){
this.active = true;
} else {
this.active = false;
}
}
},