add header hidden control by scrolling

Author: mimosafa

src/components/global/header/header.js

@@ -11,9 +11,8 @@ export default {
   },
   data() {
     return {
-      brands: null,
-      menus: null,
-      others: null
+      isActive: false,
+      pageYOffset: 0
     }
   },
   mounted() {
@@ -30,10 +29,13 @@ export default {
       }
       resizeTimer = setTimeout(this.init, 200);
     });
+
+    window.addEventListener('scroll', this.handleScroll);
   },
   methods: {
     init() {
       media.init();
+
       this.$refs.toggle.init();
       this.brands.style.display = 'none';
       this.menus.style.display = 'none';
@@ -44,18 +46,44 @@ export default {
       else if (media.isDesktop()) {
         this.others.style.display = '';
       }
+
+      this.isActive = false;
+
       this.$emit('init-header');
     },
-    toggleCollapse() {
+    handleCollapse() {
+      window.removeEventListener('scroll', this.handleScroll);
+
+      // HamburgerToggle
       this.$refs.toggle.toggle();
+
       $(this.brands).slideToggle(speed);
       $(this.menus).slideToggle(speed);
 
       if (media.isPhone()) {
         $(this.others).slideToggle(speed);
       }
 
+      this.isActive = !this.isActive;
+
+      if (!this.isActive) {
+        window.addEventListener('scroll', this.handleScroll);
+      }
+
       this.$emit('toggle-header-collapse', speed);
+    },
+    handleScroll() {
+      const oldPageYOffset = this.pageYOffset;
+      this.pageYOffset = window.pageYOffset;
+
+      if ((oldPageYOffset < this.pageYOffset) && (this.pageYOffset > 90)) {
+        // Scroll down
+        this.$el.classList.add('hidden');
+      }
+      else {
+        // Scroll up
+        this.$el.classList.remove('hidden');
+      }
     }
   }
 }

src/components/global/header/header.scss

@@ -490,3 +490,12 @@
     }
   }
 }
+
+#header {
+  transform: translate3d(0, 0, 0);
+  transition: .5s ease;
+
+  &.hidden {
+    transform: translate3d(0, -100%, 0);
+  }
+}

src/components/global/header/header.vue

@@ -21,7 +21,7 @@
             <li class="header_gnav_other_contact"><w-tokyodo-a href="/contact/">お問い合わせ</w-tokyodo-a></li>
           </ul>
           <div class="header_gnav_btn">
-            <a @click="toggleCollapse">
+            <a @click="handleCollapse">
               <span class="header_gnav_btn_ttl">Menu</span>
               <hamburger-toggle ref="toggle" />
             </a>

src/layouts/web-frame.vue

@@ -54,7 +54,7 @@ export default {
       $(this.overlay).fadeToggle(speed);
     },
     closeHeaderCollapse() {
-      this.$refs.globalHeader.toggleCollapse();
+      this.$refs.globalHeader.handleCollapse();
     }
   }
 };