Meantime in working hour I have to make something like this. If i scroll up little bit, I have to make visible my full navbar otherwise small bar is enough to show.
That's the reason I have to define a function where this function is responsible find out scroll up and down event. And I done it by this -
At first in created hook we have to add a event listener by -
created() {
if(process.client){
window.addEventListener("scroll", this.handleScroll);
}
},
and then inside methods and in handleScroll function we will declare a variable which contain current scroll position and make compare with next scroll position
handleScroll() {
if(process.client){
var currentScrollPosition = window.scrollY
if(currentScrollPosition < this.scrollPosition){
console.log("Scrolling up");
this.showFullNav = true
//your desire logic
}
else{
this.showFullNav = false
console.log("Scrolling down");
//your desire logic
}
this.scrollPosition = window.scrollY
}
},
And finally we have to destroy this event when page leave by -
destroyed() {
if(process.client){
window.removeEventListener("scroll",this.handleScroll);
}
},
That's it...
Top comments (3)
You can even use
mounted()hook, that way no need to double check if it's on the client.And AFAIK
destroyed(), is only called on the client-side even if it's not listed here: nuxtjs.org/docs/concepts/nuxt-life...Got it
Thank you for sharing your thought 🤜🤛
You're welcome! 🤗