热门营地固定

pages/campsiteDetails/_id.vue

@@ -88,13 +88,14 @@
           <div v-html="notice[0].value">
           </div>
           </div>
-          <div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
+          <div id = "fixContainer" class="hot-r-campsite" style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
+            <div id="campsiteHotId" :class="barFixed?'isFixed':''">
               <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.imgUrl" 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>
@@ -121,15 +122,16 @@ export default {
     footerModal
   },
   created() {
-    // this.getNode();
-    // this.toHot();
-    // this.getHot()
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', this.handleScroll);
+    }
   },
   data() {
     return {
       lengthPic: 0,
       preIndex: 0, //当前轮播选中图
       visible: false,
+      barFixed: false
     };
   },
   validate({ params }) {
@@ -163,6 +165,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('/campsiteDetail') != -1 ){
+        var menuTop = document.querySelector('#campsiteHotId').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;
@@ -197,6 +216,7 @@ export default {
         swiper: galleryThumbs
       }
     });
+
   },
   head: {
     title: "营地详情"
@@ -205,6 +225,12 @@ export default {
 </script>
 
 <style scoped>
+  .hot-r-campsite  .isFixed{
+    position: fixed;
+    top: 120px;
+    width: 300px;
+    background: #fff;
+  }
 .clearfix:after {
   /*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";