Merge branch 'hotfix/single' of git.yoho.cn:fe/yohobuywap-node into hotfix/single

@@ -4,7 +4,9 @@
         {{> resources/banner-top}}
     {{/ bannerTop}}
 
-    <div class="shop-nav nav"></div>
+    <div class="shop-nav nav">
+        <div class="shop-area"></div>
+    </div>
 
     <div class="shop-list"></div>
 {{/ shopCollect}}

@@ -196,10 +196,10 @@ function shopNavData() {
                 // return;
             }
 
-            $('.shop-nav').html(navString);
+            $('.shop-area').html(navString);
 
             // 导航滑动效果
-            navSwiper = new Swiper('.shop-nav', {
+            navSwiper = new Swiper('.shop-area', {
                 grabCursor: true,
                 slidesPerView: 'auto',
                 slideElement: 'li'
@@ -218,10 +218,19 @@ function shopNavData() {
                 shopListData($('.shop-nav').find('li').eq(0).data('type'));
             }
 
+            $(window).on('scroll touchmove touchstart touchend', function() {
+                if ($(window).scrollTop() > $('.shop-nav')[0].offsetTop) {
+                    $('.shop-area').addClass('fixer');
+                } else {
+                    $('.shop-area').removeClass('fixer');
+                }
+            });
+
             // 导航点击事件
             $('.shop-nav').find('li').on('click', function() {
                 var $this = $(this),
-                    tabName = $this.data('type');
+                    tabName = $this.data('type'),
+                    $top = $('.shop-nav')[0].offsetTop;
 
                 if ($this.hasClass('active')) {
                     stoping = true;
@@ -232,6 +241,10 @@ function shopNavData() {
                 shopListData(tabName, stoping);
 
                 $this.addClass('active').siblings().removeClass('active');
+
+                if ($('.shop-area').hasClass('fixer')) {
+                    $(window).scrollTop($top);
+                }
             });
 
         },

@@ -7,7 +7,6 @@
         box-sizing: border-box;
         overflow: hidden;
         background: #fff;
-        border-bottom: 1px solid #e0e0e0;
         margin-bottom: 30px;
 
         li {
@@ -30,11 +29,15 @@
         .active {
             color: #000;
         }
+
+        .shop-area {
+            background: #fff;
+            border-bottom: 1px solid #e0e0e0;
+        }
     }
 
     .shop-list {
         width: 100%;
-/*        padding-top: 30px;*/
 
         .shop-info {
             background: #fff;
@@ -128,4 +131,11 @@
             }
         }
     }
+
+    .fixer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
 }