I have this code where the header slides up on scroll down and slides down on scroll up. The problem is if there's a page that doesn't scroll, the navigation goes away on scroll even though the page is not tall enough to scroll. Write JS for Vue2 that checks if the page is tall enough. If its not tall enough, then disable the navigation going away. If its tall enough and scrollable, then enable the slide up/down. Here's the code to edit:





 export default {
 props: ['fullLogo'],
 data() {
 return {
 navTranslateY: 0,
 previousScrollY: 0,
 windowWidth: 0
 };
 },
 mounted() {
 this.windowWidth = window.innerWidth;
 window.addEventListener("resize", this.handleResize);
 window.addEventListener("scroll", this.handleScroll);
 },
 beforeDestroy() {
 window.removeEventListener("resize", this.handleResize);
 window.removeEventListener("scroll", this.handleScroll);
 },
 methods: {
 handleResize() {
 this.windowWidth = window.innerWidth;
 },
 handleScroll() {
 if (window.scrollY > this.previousScrollY && this.windowWidth >= 1024) {
 this.navTranslateY = -200;
 } else {
 this.navTranslateY = 0;
 }
 this.previousScrollY = window.scrollY;
 }
 }
 }
f4d8878d-e378-4087-a99b-c31dad5f0609
Έχω αυτόν τον κώδικα όπου η κεφαλίδα ολισθαίνει προς τα πάνω κατά την κύλιση προς τα κάτω και σύρεται προς τα κάτω κατά την κύλιση προς τα πάνω. Το πρόβλημα είναι ότι εάν υπάρχει μια σελίδα που δεν κάνει κύλιση, η πλοήγηση εξαφανίζεται κατά την κύλιση, παρόλο που η σελίδα δεν είναι αρκετά ψηλή για κύλιση. Γράψε JS για Vue2 που να ελέγχει αν η σελίδα είναι αρκετά ψηλή. Εάν δεν είναι αρκετά ψηλή, τότε απενεργοποιήστε την πλοήγηση. Εάν είναι αρκετά ψηλή και με δυνατότητα κύλισης, ενεργοποίησε τη κύλιση πάνω/κάτω. Εδώ είναι ο κώδικας για επεξεργασία:

export default {
props: ['fullLogo'],
data() {
return {
navTranslateY: 0,
previousScrollY: 0,
windowWidth: 0
};
},
mounted() {
this.windowWidth = window.innerWidth;
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleResize() {
this.windowWidth = window.innerWidth;
},
handleScroll() {
if (window.scrollY > this.previousScrollY && this.windowWidth >= 1024) {
this.navTranslateY = -200;
} else {
this.navTranslateY = 0;
}
this.previousScrollY = window.scrollY;
}
}
}

submitted
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}