Merge branch 'develop' into release/1.0

@@ -21,10 +21,10 @@
 
 
     module.exports = {
     module.exports = {
         props: {
         props: {
-            'title': String, 
-            'class': [String, Object, Array], 
-            'fixed': Boolean,
-            'scrollFix': Boolean
+            title: String,
+            class: [String, Object, Array],
+            fixed: Boolean,
+            scrollFix: Boolean
         },
         },
         methods: {
         methods: {
             goBack() {
             goBack() {
@@ -36,15 +36,40 @@
 <style>
 <style>
     .blk-header-wrap.ghost {
     .blk-header-wrap.ghost {
         .blk-header {
         .blk-header {
-            background-color: transparent;
+            background-color: rgba(255, 255, 255, 0);
             transition: 0.3s all;
             transition: 0.3s all;
             border-bottom: 0;
             border-bottom: 0;
         }
         }
 
 
         .blk-header-title {
         .blk-header-title {
-            visibility: hidden;
+            opacity: 0;
         }
         }
     }
     }
+
+    .blk-header-wrap.ghost-2 {
+        .blk-header {
+            background-color: rgba(255, 255, 255, 0.4);
+            transition: 0.3s all;
+            border-bottom: 0;
+        }
+
+        .blk-header-title {
+            opacity: 0.3;
+        }
+    }
+
+    .blk-header-wrap.ghost-3 {
+        .blk-header {
+            background-color: rgba(255, 255, 255, 0.7);
+            transition: 0.3s all;
+            border-bottom: 0;
+        }
+
+        .blk-header-title {
+            opacity: 0.7;
+        }
+    }
+
     .blk-header {
     .blk-header {
         box-sizing: content-box;
         box-sizing: content-box;
         position: fixed;
         position: fixed;

@@ -134,6 +134,27 @@
                     }, 200);
                     }, 200);
                 });
                 });
                 return false;
                 return false;
+            },
+            toggle() {
+                let ghost = true;
+                let ghost2 = false;
+                let ghost3 = false;
+
+                if (window.scrollY > 40) {
+                    ghost = false;
+                    ghost2 = false;
+                    ghost3 = false;
+                } else if (window.scrollY > 25) {
+                    ghost = false;
+                    ghost3 = true;
+                } else if (window.scrollY > 10) {
+                    ghost = false;
+                    ghost2 = true;
+                }
+
+                this.$refs.header.$el.classList.toggle('ghost', ghost);
+                this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
+                this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
             }
             }
         },
         },
         ready() {
         ready() {
@@ -144,14 +165,12 @@
                 return false;
                 return false;
             });
             });
 
 
-            window.addEventListener('scroll', () => {
-                let transparent = true;
-
-                if (window.scrollY > 20) {
-                    transparent = false;
-                }
+            window.addEventListener('touchmove', () => {
+                this.toggle();
+            });
 
 
-                this.$refs.header.$el.classList.toggle('ghost', transparent);
+            window.addEventListener('scroll', () => {
+                this.toggle();
             });
             });
 
 
             document.addEventListener('visibilitychange', () => {
             document.addEventListener('visibilitychange', () => {