header animation

src/pages/detail/Detail.vue

@@ -1,20 +1,25 @@
 <template>
   <div>
     <detail-banner></detail-banner>
+    <detail-header></detail-header>
+    <div class="content"></div>
   </div>
 </template>
 
 <script>
 import DetailBanner from "./components/banner";
+import DetailHeader from "./components/header"
 
 export default {
   name: "Detail",
   components: {
-    DetailBanner: DetailBanner
+    DetailBanner: DetailBanner,
+    DetailHeader: DetailHeader
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-
+.content
+  height 50rem
 </style>

src/pages/detail/components/header.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
+      <div class="iconfont header-abs-back">&#xe658;</div>
+    </router-link>
+    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
+      <router-link to="/">
+        <div class="iconfont header-fixed-back">&#xe658;</div>
+      </router-link>
+      景点详情
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailHeader",
+  data: function() {
+    return {
+      showAbs: true,
+      opacityStyle: {
+        opacity: 0
+      }
+    };
+  },
+  methods: {
+    handleScroll: function() {
+      const top = document.documentElement.scrollTop;
+      if (top > 60) {
+        let opacity = top / 140;
+        opacity = opacity > 1 ? 1 : opacity;
+        this.opacityStyle = {
+          opacity: opacity
+        }
+        this.showAbs = false;
+      } else {
+        this.showAbs = true;
+      }
+    }
+  },
+  activated: function() {
+    window.addEventListener("scroll", this.handleScroll);
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+
+.header-abs
+  position absolute
+  left .2rem
+  top .2rem
+  width .8rem
+  height .8rem
+  line-height .8rem
+  border-radius .4rem
+  text-align center
+  background rgba(0, 0, 0, .8)
+  .header-abs-back
+    color #ffffff
+    font-size .4rem
+.header-fixed
+  position fixed
+  top 0
+  left 0
+  right 0
+  height $headerHeight
+  line-height $headerHeight
+  text-align center
+  color #ffffff
+  background $bgColor
+  font-size .32rem
+  .header-fixed-back
+    position absolute
+    top 0
+    left 0
+    width .64rem
+    text-align center
+    font-size .4rem
+    margin-left .1rem
+    color #ffffff
+</style>