添加首页tab栏点击固定及页面滚动固定

@@ -24,7 +24,6 @@ function index(req, res, next) {
 
 
 function groupListIndex(req, res, next) {
-
     req.ctx(GroupService).groupList()
         .then(result => {
             return res.render('group/group-list', {

@@ -13,5 +13,5 @@
     </div>
 </div>
 
-<a class="my-group my-group-handler" href="/activity/group/progress">我的拼团</a>
+<a class="my-group my-group-handler" href="/activity/group/order">我的拼团</a>
 <div class='my-share'></div>
\ No newline at end of file

 <div class="group">
     <div class="resources">
+        <div class="floors">
         {{#each floors}}
         {{#ifcond template_name "==" 'focus'}}
         {{> group/resources/focus}}
@@ -20,23 +21,17 @@
         {{> group/resources/collage-buy-prd-list}}
         {{/ifcond}}
         {{/each}}
-
+        </div>
         <div id='fixedTab' class="tab-filter">
             {{!-- {{#if floatTab}} float{{/if}}{{#if !tabs.showTab}} only-filter{{/if}} --}}
             {{#if tabs.showTab}}
-            <div class="tab">
+            <div class="tab group-tab">
                 <div class="tab-item">
                     <div class="tiptext active" data-channel="newGroup">邀新团</div>
-                    {{!-- {{#if isNewGroup}} --}}
-                    <div class="tab-line"></div>
-                    {{!-- {{/if}} --}}
-
                 </div>
                 <div class="tab-item">
                     <div class="tiptext" data-channel="normalGroup">普通团</div>
-                    {{!-- {{#if !isNewGroup}} --}}
-                    {{!-- <div class="tab-line"></div> --}}
-                    {{!-- {{/if}} --}}
+
                 </div>
             </div>
             {{/if}}
@@ -52,5 +47,5 @@
         {{/if}}
 
     </div>
-    <a class="bottom" href="/activity/group/progress">我的拼团</a>
+    <a class="bottom" href="/activity/group/order">我的拼团</a>
 </div>
\ No newline at end of file

@@ -8,11 +8,61 @@ class Group extends Page {
     constructor() {
         super();
 
-        this.selector = {};
+        this.selector = {
+            tabSection: $('#fixedTab'),
+            floorsContentHeight: $('.floors').height(),
+            groupTab: $('.group-tab'),
+            filterTab: $('.filter-nav'),
+            groupListContent: $('.group-list')
+        };
+        this.bindEvents();
         this.swiperTop();
+
+        $(window).scroll(() => {
+            window.requestAnimationFrame(this.scrollHandler.bind(this));
+        });
+    }
+    scrollHandler() {
+        // 滚动固定tab
+        let floorsContentHeight = this.selector.floorsContentHeight + 5;
+
+        console.log(floorsContentHeight);
+        if ($(window).scrollTop() > floorsContentHeight) {
+            this.selector.tabSection.addClass('float');
+            this.selector.groupListContent.addClass('mrt');
+        } else {
+            this.selector.tabSection.removeClass('float');
+            this.selector.groupListContent.removeClass('mrt');
+        }
     }
+    bindEvents() {
+        this.selector.tabSection.on('click', this.fixedTab.bind(this));
+        this.selector.groupTab.on('click', this.groupTabChange.bind(this));
 
-    bindEvents() {}
+    }
+    fixedTab() {
+        let listHeight = this.selector.groupListContent.height();
+        let windowHeight = $(window).height();
+
+        // 商品列表超过一屏时
+        if (listHeight > windowHeight || listHeight === windowHeight) {
+            if (!this.selector.tabSection.hasClass('float')) {
+                this.selector.tabSection.addClass('float');
+                $(window).scrollTop(this.selector.floorsContentHeight + 10);
+            }
+        }
+
+    }
+    groupTabChange(e) {
+        let target = $(e.target);
+        let channel = target.data('channel');
+
+        if (!target.hasClass('active')) {
+            this.selector.groupTab.find('.tiptext').removeClass('active');
+            target.addClass('active');
+        }
+        console.log(channel);
+    }
 
     // 顶部swiper
     swiperTop() {
@@ -29,6 +79,8 @@ class Group extends Page {
             });
         }
     }
+
+    //
 }
 
 $(() => {

@@ -27,16 +27,21 @@
         border-top: 1px solid #e0e0e0;
     }
 
+    .mrt {
+        margin-top: 230px;
+    }
+
+    .floors {
+        border-bottom: 10px solid #f0f0f0;
+    }
+
     .tab {
         width: 100%;
-        height: wrap;
         display: flex;
-        flex-direction: row;
         align-items: center;
         background-color: white;
         z-index: 1000;
         border-bottom: 1px solid #e0e0e0;
-        border-top: 10px solid #f0f0f0;
 
         .tab-item {
             position: relative;
@@ -53,42 +58,25 @@
         font-size: 32px;
         color: #b0b0b0;
         flex: 1;
-        width: wrap;
         text-align: center;
         height: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        align-content: center;
-        flex-direction: row;
-        align-items: center;
+        width: 60%;
+        line-height: 80px;
+        border-bottom: solid 4px transparent;
         font-weight: 500;
     }
 
     .tiptext.active {
         color: #444;
-    }
-
-    .tab-line {
-        position: absolute;
-        bottom: -2px;
-        left: 50%;
-        background-color: black;
-        width: 180px;
-        height: 4px;
-        transform: translateX(-50%);
+        border-bottom: solid 4px #000;
     }
 
     .tab-filter.float {
         position: fixed;
-        top: -22px;
+        top: 0;
         left: 0;
         right: 0;
-        border-top: none;
         z-index: 998;
         background-color: #fff;
     }
-
-    .tab-filter.float.only-filter {
-        top: -1px;
-    }
 }