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;
 }
 }
 }
ab6e1297-92a6-4b72-9fd8-2f63d30c828f
Mayroon akong code kung saan ang header ay nag-slide pataas kapag ang user ay nag-scroll pababa at nag-slide pababa kapag ang user ay nag-scroll pataas. Ang problema ay kung mayroong isang pahina na hindi nag-s-scroll, ang navigation ay nawawala kapag nag-scroll kahit ang pahina ay hindi sapat na taas para mag-scroll. Sumulat ng JS sa Vue2 na nagsusuri kung sapat na ang taas ng pahina. Kung ito ay hindi sapat na mataas, paganahin ang navigation nang hindi naglalaho. Kung ito ay sapat at maaring iscroll, paganahin ang slide pataas/pababa. Narito ang code na i-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;
 }
 }
 }
```
submitted
Mayroon akong code kung saan ang header ay nag-slide pataas kapag samtang ang user ay nag-scroll pababa at nag-slide pababa kapag ang user ay nag-scroll pataas. Ang problema ay kung mayroong isang pahina na hindi nag-s-scroll, ang navigation ay nawawala kapag nag-scroll kahit ang pahina ay hindi sapat na matangkad para mag-scroll. Sumulat ng JS para sa Vue2 na nagsusuri kung sapat na matangkad ang pahina. Kung ito ay hindi sapat na matangkad, paganahin ang navigation na hindi naglalaho. Kung ito ay matangkad sapat at maaring iscroll, paganahin ang slide pataas/pababa. Narito ang code na i-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;
 }
 }
 }
```
{"source": "ewof/sharegpt-instruct-unfiltered-deduped", "kind": "human", "evolved_from": null}