天猫首页分类随着滚动事件展示效果

<ul id="category">
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>
  <li class="item even">
    <div class="title">国际品牌</div>
    <ul class="list clearfix">
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
      <li><a href="#">优衣库</a></li>
    </ul>
  </li>

</ul>

　　

(function(){
		/**
		@模仿天猫首页的分类展示效果
		@基于jQuery
		@杨永 yang_liulang@126.com  377746756
		*/
		function Category(o){
			//保存分类元素
			this.categoryBox=o;
			//保存分类索引列表
			this.categoryItems=$(".item",o);
			//绑定滚动事件
			this.bindScroll();
			};
		Category.prototype={
			bindScroll:function(){
					var _this=this,topValue,t,oldValue,l;
					$(window).scroll(function(){
							window.clearTimeout(t);
							topValue=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;
							t=window.setTimeout(function(){
								_this.countPos(topValue);
							},100);
							
						});
				},
			countPos:function(scrollBarTopValue){//当滚动的时候判断滚动条的位置并设置小于滚动条位置的自分类执行收缩
					this.categoryItems.each(function(){
							if($(this).position().top<scrollBarTopValue){
								$(".list",this).slideUp();	
							}else{
								$(".list",this).slideDown();
							};	
						});	
				}
			};
		var J_Category=new Category($("#category"));
})();
</script>