首页头部固定

zhiyangdu
1 parent c7613651
Showing 2 changed files with 56 additions and 1 deletions
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
@@ -10,6 +10,11 @@
         height: 93px;
     }
 }
+// 列表
+.column-list-box{
+  display: flex;
+  justify-content: center;
+}
 .hide{
   display:none;
 }
@@ -19,6 +24,10 @@
 }
 .back-box{
   background-color: transparent;
+  position: fixed;
+  top: 0;
+  left:0;
+  z-index: 2;
 }
 .main_box{
   width: 100%;
@@ -12,11 +12,13 @@
                     <!-- pl -->
         <div class="pl" :class="{'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
         <div class="main_box">
+                          <!-- pl -->
+        <div class="pl" :class="{'is-cnlive': isCNLive.value, 'hide': $route.query.hideBack == true}"></div>
           <back-box
               v-if="isCNLive.value"
               :class="{'hide': $route.query.hideBack == true}"
               class="back-box"
-              :style="'padding-top: ' + $parent.top.value + 'px'"
+              :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(255, 248, 232, ' + opacity + ')'" ref="navBox"
               @back="back"
               :backs="backs">
           </back-box>
@@ -123,6 +125,7 @@ export default {
   name: 'pointsmall',
   data () {
     return {
+      opacity: 0,             // 透明度  
       title: "",              // 标题
       backs: null,            // 后退按钮组
       navs: null, // 导航
@@ -313,6 +316,47 @@ export default {
         Toast(res.message);
       }
     },
+
+    /**
+* 滚动条滚动/touchmove监听处理
+* @param {object} e [滚动条对象]
+* @param {boolean} isTimeout [是否为setTimeout方法调用]
+*/
+    onPageScrollFun (e, isTimeout = false) {
+
+      // 获取滚动条位置，浏览器兼容处理
+      let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
+
+      // 滚动控制高度
+      let maxHeight = 200;
+
+      // 动态获取百分比分配比例
+      if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
+        maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
+      }
+
+      if (scrollTop >= 0 && scrollTop <= maxHeight) {
+        this.opacity = scrollTop / maxHeight;
+      } else if (scrollTop > maxHeight) {
+        this.opacity = 1;
+      } else {
+        this.opacity = 0;
+      }
+
+      if (!isTimeout) {
+
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+
+        // 倒计时校正滚动条位置
+        this.timer = setTimeout(function (options) {
+
+          // 递归
+          options.context.onPageScrollFun(options.e, true);
+        }, 1000, { e, context: this });
+      }
+    }
   },
   head: {
     title () {
@@ -391,6 +435,8 @@ export default {
         });
       }
     }
+    // 监听滚动条，设置滚动条推动渐变颜色和图片
+    window.addEventListener("scroll", this.onPageScrollFun, true);
   }
 }
 </script>