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;
 }
 }
 }
b877e4dd-5ef4-4f6a-9fe7-d4f776aa0785
Tengo este código donde el encabezado se desliza hacia arriba al desplazarse hacia abajo y se desliza hacia abajo al desplazarse hacia arriba. El problema es que si hay una página que no se desplaza, la navegación se esfuma al desplazar incluso aunque la página no sea suficientemente alta para desplazarse. Escribe JS para Vue2 que verifica si la página es suficientemente alta. Si no es suficientemente alta, entonces desactiva que la navegación se vaya. Si es suficientemente alta y se puede desplazar, entonces habilita el deslizamiento hacia arriba/abajo. Aquí está el código para editar:

```

 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
Tengo este código donde el encabezado se desliza hacia arriba al desplazarse hacia abajo y se desliza hacia abajo al desplazarse hacia arriba. El problema es que si hay una página que no se desplaza, la navegación se esfuma al desplazar incluso aunque la página no sea suficientemente alta para desplazarse. Escribe JS para Vue2 que verifica si la página es suficientemente alta. Si no es suficientemente alta, entonces desactiva que la navegación se vaya. Si es suficientemente alta y se puede desplazar, entonces habilita el deslizamiento hacia arriba/abajo. Aquí está el código para editar:

```

 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;
 }
 }
 }
```
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}