adding sticky header

src/components/Menu.vue

@@ -6,8 +6,9 @@ export default {
         type: String,
         title: String,
     },
-    components: { LocaleSelector }
+    components: { LocaleSelector },
 }
+
 </script>
 
 <template>
@@ -36,6 +37,7 @@ export default {
     height: 574px;
     background-repeat: no-repeat;
     background-size: contain;
+    transition: background-color .3s ease-in-out;
 
     .overlay {
       width: 100%;
@@ -108,5 +110,24 @@ export default {
         background: transparent;
       }
     }
+
+    .has-sticky & {
+      background-color: #121212;
+      background-image: none;
+      height: 120px;
+      position: fixed;
+      top: 0px;
+      left: 0px;
+      z-index: 1000;
+      width: 100%;
+      .overlay {
+        background: #000;
+        width: 1366px;
+        margin: 0 auto;
+      }
+      .title {
+        display: none;
+      }
+    }
   }
 </style>