fix

@@ -33,6 +33,7 @@
         .blk-header {
             background-color: transparent;
             transition: 0.3s all;
+            border-bottom: 0;
         }
     }
     .blk-header {

 <template>
-    <cheader title="商品详情" class="top-nav">
+    <cheader title="商品详情" class="product-header ghost" v-ref:header>
         <i class="icon icon-share" slot="right" @click="share()"></i>
     </cheader>
 </template>
 <style>
-    .top-nav {
-        .blk-header {
-            background-color: transparent;
-            border-bottom: 0;
-        }
-
+    .product-header {
         .blk-header-gap {
             display: none;
         }
@@ -41,6 +36,18 @@
                     url: location.href
                 });
             }
+        },
+
+        created() {
+            window.onscroll = () => {
+                let transparent = true;
+
+                if (window.scrollY > 20 ) {
+                    transparent = false;
+                }
+
+                this.$refs.header.$el.classList.toggle('ghost', transparent);
+            }
         }
     };
 </script>