热门旅游、车型、活动触顶固定

pages/activityList/_id.vue

@@ -25,14 +25,18 @@
             <h3 class="content-t content-t-l" style="text-align: left;">活动详情</h3>
             <div class="models-details" v-html="detail.content"></div>
           </div>
-          <div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 0 20px 20px 20px;">
-            <h3 class="content-t hot-t-r">热门活动</h3>
+          <div id = "fixContainer" class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 0 20px 20px 20px;">
+            <div id="activityHotId" :class="barFixed?'isFixed':''">
+              <h3 class="content-t hot-t-r">热门活动</h3>
+          <!--<div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 0 20px 20px 20px;">-->
+            <!--<h3 class="content-t hot-t-r">热门活动</h3>-->
             <div class="content-detail tc" v-for="item in hotList" :key="item.id">
               <img :src="item.banner" :alt="item.title" style="width: 190px;height: 120px;"/>
               <div class="tc ellipsis cc-title">{{item.title}}</div>
               <nuxt-link :to="'/activityList/'+item.id"><div class="detail-new">活动详情</div></nuxt-link>
             </div>
           </div>
+          </div>
        </div>
       </div>
     </div>
@@ -59,6 +63,12 @@
       return{
         lengthPic:0,
         preIndex: 0,//当前轮播选中图
+        barFixed: false
+      }
+    },
+    created() {
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', this.handleScroll);
       }
     },
     validate ({ params }) {
@@ -83,6 +93,23 @@
         console.log(this.lengthPic);
 
       },
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        let path = $nuxt.$route.path;
+        if(path.indexOf('/activityList') != -1 ){
+          var menuTop = document.querySelector('#activityHotId').offsetTop;
+          console.log(menuTop+"--"+scrollTop);
+          //滑动到指定位置菜单吸顶
+          if (scrollTop > menuTop-120) {
+            this.barFixed = true;
+          }
+          let fixContainer = document.querySelector('#fixContainer').offsetTop;
+          if(scrollTop<fixContainer-120){
+            this.barFixed = false;
+//          this.tabIndex = 0;
+          }
+        }
+      },
     },
     mounted(){
       let t = this;
@@ -117,14 +144,11 @@
   }
 </script>
 <style  scoped>
-  .is-fixed{
+  .isFixed{
     position: fixed;
-    width: 1200px;
+    top: 120px;
+    width: 300px;
     background: #fff;
-    border-bottom: 10px solid #ccc;
-    margin-left: -30px;
-    padding-left: 0;
-    top: 90px;
   }
   .tc {
     text-align: center;

pages/tourDetails/_id.vue

@@ -142,14 +142,18 @@
           <div v-html="notice[0].value">
           </div>
           </div>
-          <div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
-              <h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门旅行</h3>
+         <div id = "fixContainer" class="hot-r-campsite" style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
+           <div id="tourHotId" :class="barFixed?'isFixed':''">
+             <h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门旅行</h3>
+          <!--<div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">-->
+              <!--<h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门旅行</h3>-->
               <div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:25px 60px 0 60px">
               <img :src="item.cover" alt="" style="width:180px;height:135px">
               <h5 style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;">{{item.name}}</h5>
                <nuxt-link :to="item.link"><button class="buttonDetail" style="font-size:14px;margin-bottom:57px" >旅游详情</button></nuxt-link>
 
               </div>
+           </div>
           </div>
         </div>
       </div>
@@ -180,9 +184,14 @@ export default {
       lengthPic: 0,
       preIndex: 0, //当前轮播选中图
       visible: false,
-
+      barFixed: false
     };
   },
+  created() {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', this.handleScroll);
+    }
+  },
   validate({ params }) {
     console.log(params.id);
     return !isNaN(+params.id);
@@ -248,6 +257,23 @@ export default {
     visiblePic() {
       this.visible = !this.visible;
     },
+    handleScroll: function () {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      let path = $nuxt.$route.path;
+      if(path.indexOf('/tourDetail') != -1 ){
+        var menuTop = document.querySelector('#tourHotId').offsetTop;
+        console.log(menuTop+"--"+scrollTop);
+        //滑动到指定位置菜单吸顶
+        if (scrollTop > menuTop-120) {
+          this.barFixed = true;
+        }
+        let fixContainer = document.querySelector('#fixContainer').offsetTop;
+        if(scrollTop<fixContainer-120){
+          this.barFixed = false;
+//          this.tabIndex = 0;
+        }
+      }
+    },
   },
   mounted() {
     let t = this;
@@ -286,6 +312,12 @@ export default {
 </script>
 
 <style scoped>
+  .isFixed{
+    position: fixed;
+    top: 120px;
+    width: 300px;
+    background: #fff;
+  }
 .clearfix:after {
   /*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";

pages/vehicleList/_id.vue

@@ -85,14 +85,18 @@
               </div>
             </div>
           </div>
-          <div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">
-            <h3 class="content-t hot-t-r">热门车型</h3>
+          <div id = "fixContainer" class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">
+            <div id="vehicleHotId" :class="barFixed?'isFixed':''">
+              <h3  class="content-t hot-t-r">热门车型</h3>
+          <!--<div class="content-r-link" style="width: 300px;background: #fff;margin: 20px 0;padding: 20px;">-->
+            <!--<h3 class="content-t hot-t-r">热门车型</h3>-->
             <div class="content-detail tc" v-for="item in hotList" :key="item.id">
               <img :src="item.coverPic" :alt="item.name" style="width: 161px;height: 116px;"/>
               <div class="tc ellipsis cc-title">{{item.name}}</div>
               <nuxt-link :to="item.link"><div class="detail-new">租车详情</div></nuxt-link>
             </div>
           </div>
+          </div>
         </div>
       </div>
     </div>
@@ -120,6 +124,12 @@
         isShowScan: false,
         lengthPic:0,
         preIndex: 0,//当前轮播选中图
+        barFixed: false
+      }
+    },
+    created() {
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', this.handleScroll);
       }
     },
     validate ({ params }) {
@@ -166,6 +176,23 @@
       showScan(){
         this.isShowScan = !this.isShowScan;
       },
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        let path = $nuxt.$route.path;
+        if(path.indexOf('/vehicleList') != -1 ){
+          var menuTop = document.querySelector('#vehicleHotId').offsetTop;
+          console.log(menuTop+"--"+scrollTop);
+          //滑动到指定位置菜单吸顶
+          if (scrollTop > menuTop-120) {
+            this.barFixed = true;
+          }
+          let fixContainer = document.querySelector('#fixContainer').offsetTop;
+          if(scrollTop<fixContainer-120){
+            this.barFixed = false;
+//          this.tabIndex = 0;
+          }
+        }
+      },
     },
     mounted(){
       let t = this;
@@ -204,6 +231,12 @@
 </script>
 
 <style scoped>
+  .isFixed{
+    position: fixed;
+    top: 120px;
+    width: 300px;
+    background: #fff;
+  }
   .member-list{
     color: #666;
     font-size: 14px;