分类推荐(article-type-three)rebuild

@@ -10,9 +10,11 @@ var $ = require('jquery');
  */
 exports.init = function() {
     $(function() {
+        //Note: article-type-three在一个页面中只能出现一次（业务注意点）
         var container = $('.article-type-three'),
             thumbContainer = container.find('.thumb-container'),
-            prodList = container.find('.prod-list');
+            prodList = container.find('.prod-list'),
+            wH = $(window).height();
 
         //点击分类，显示分类下推荐商品列表
         thumbContainer.delegate('.thumb', 'click', function() {
@@ -39,33 +41,41 @@ exports.init = function() {
         });
 
         //默认选中第一个
-        thumbContainer.each(function() {
-            $(this).find('.thumb:first-child').click();
-        });
+        thumbContainer.find('.thumb:first-child').click();
         
         //scroll时控制列表的位置
         $(document).scroll(function() {
             var sTop = $(this).scrollTop(),
-                cur,
-                parent,
-                containerH;
-            thumbContainer.each(function() {
-                var pNode = $(this).closest('.article-type-three');
-                if (sTop > pNode.offset().top) {
-                    cur = $(this);
-                    parent = pNode;
-                    return;
-                } else {
-                    $(this).removeClass('fixed');
-                }
-            });
-            if (cur) {
-                containerH = cur.closest('.thumb-container').outerHeight();
-                if (sTop < parent.offset().top + parent.height() - containerH) {
-                    cur.addClass('fixed');
-                } else {
-                    cur.removeClass('fixed')
-                }
+                tContainerH = thumbContainer.outerHeight(), //thumber-container高度
+                containerH = container.height(), //article-type-three高度
+                containerTop = container.offset().top; //article-type-three offset top
+
+            //Tip: removeClass只用移除相邻状态即可
+            if (sTop <= containerTop - wH + tContainerH) {
+                thumbContainer
+                    .addClass('fixed-bottom')
+                    .removeClass('static');
+            } else if (sTop <= containerTop) {
+                thumbContainer
+                    .addClass('static')
+                    .removeClass('fixed-bottom fixed-top');
+            } else if (sTop <= containerTop + containerH - tContainerH) {
+                thumbContainer
+                    .addClass('fixed-top')
+                    .removeClass('static absolute')
+                    .removeAttr('style');
+            } else if (sTop < containerTop + containerH) {
+                thumbContainer
+                    .addClass('absolute')
+                    .removeClass('static fixed-top')
+                    .css({
+                        top: containerTop + containerH - tContainerH
+                    });
+            } else if (sTop > containerTop + containerH) {
+                thumbContainer
+                    .addClass('static')
+                    .removeClass('absolute')
+                    .removeAttr('style');
             }
         });
     });

@@ -12,22 +12,35 @@ $pxConvertRem : 40;
     }
 
     .thumb-container {
-        position: relative;
         font-size: 0;
         padding: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
         background: #fff;
         z-index: 10;
         border-bottom: 1px solid #b0b0b0;
 
-        &.fixed {
+        &.fixed-top {
             position: fixed;
             left: 0;
             right: 0;
+            top: 0;
         }
 
+        &.fixed-bottom {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        &.absolute {
+            position: absolute;
+        }
+
+        &.static {
+            position: static;
+        }
 
         .thumb {
-            position: relative;
             display: inline-block;
             position: relative;
             margin-right: 22rem / $pxConvertRem;

@@ -13,11 +13,6 @@ body {
     display: none;
 }
 
-.fixed {
-    position: fixed;
-    top: 0;
-}
-
 /**
 * 闭合浮动
 * @Doc: http://nicolasgallagher.com/micro-clearfix-hack/

 {{# collocation}}
     <div class="article-type-three">
         <div class="container-fixed-pos">
-            <ul class="thumb-container clearfix">
+            <ul class="thumb-container fixed-bottom clearfix">
                 {{# list}}
                     <li class="thumb">
                         <img class="thumb-img lazy" data-original="{{thumb}}">