zoukankan      html  css  js  c++  java
  • 天猫首页分类随着滚动事件展示效果

    <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>
    

      

  • 相关阅读:
    【GO】GO开发环境安装及VS Code配置
    【计算机组成原理】第一章 计算机系统概论
    oracle 12.2新特性:sqlplus history
    取消交互式创建linux用户密码
    undo表空间收缩
    如何对undo表空间大小进行设置
    查看数据库实际使用多大内存
    Oracle 12.2Cgrid脚本安装失败软件完全删除
    有关rman备份ora-27192和ora-19511错误
    数据库altert日志中的GTX提示
  • 原文地址:https://www.cnblogs.com/yangliulang/p/3066703.html
Copyright © 2011-2022 走看看