jquery实现仿京东侧边栏 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>仿京东侧边栏</title>
  6     <style type="text/css">
  7         *{
  8             margin:0;padding:0;
  9         }
 10         ul{list-style: none;}
 11         .top,.dian,.jia,.fu,.mei,.bottom{
 12             width: 1210px;
 13             margin: 0 auto;
 14         }
 15         .subnav
 16         {
 17             position: fixed;
 18             width: 38px;
 19             height: 200px;
 20             top:200px;
 21             left:50%;
 22             margin-left:605px;
 23             /*display: none;*/
 24         }
 25         .subnav li{
 26             height: 36px;
 27             border:1px solid #DEDEDE;
 28             margin-bottom: 5px;
 29             font-size:0;
 30             background: url(bg.png) no-repeat;
 31         }
 32         .subnav li:hover,.subnav li.current,.back
 33         {
 34             border:1px solid #ED5759;
 35             background: #FDEEEE;   /* 只有冲突的时候才会出现层叠 */
 36             /* 背景颜色 背景图片 背景位置 背景平铺  背景固定 */
 37             /* css 层叠样式表 */
 38             font-size:12px;
 39             color: #ED5759;
 40             padding-left: 6px;
 41             padding-top: 2px;
 42             height: 34px;
 43             cursor: pointer;
 44         }
 45     </style>
 46     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 47     <script type="text/javascript">
 48 //     1.先找到响应的小图标；
 49 //     2.先让页面滚动的时候，滚动到响应的小图标那里；
 50 //     3.设置点击事件
 51         $(function(){
 52             var $menu=$('.subnav');
 53             var $list=$('.subnav li');
 54             var top=0;
 55             var num=0;
 56            $list.each(function(index,ele){
 57                var num=index*55;
 58                $list.css({
 59                   "background-position":0,num
 60                });
 61            });
 62             $(window).scroll(function(){
 63                 var top=$(document).scrollTop();
 64                 if(top> $('.mei').offset().top){
 65                     $list.eq(3).addClass('current').siblings().removeClass();
 66                 }else if(top> $('.fu').offset().top){
 67                     $list.eq(2).addClass('current').siblings().removeClass();
 68                 } else if(top>= $(".jia").offset().top){
 69                     $list.eq(1).addClass("current").siblings().removeClass();
 70                 } else if(top >= $(".dian").offset().top){
 71                     $list.eq(0).addClass("current").siblings().removeClass();
 72                 }else if(top>0){
 73                     $menu.fadeIn();
 74                 }else{
 75                     $menu.fadeOut();
 76                 }
 77             });
 78             $list.click(function(){
 79                 $('html,body').stop().animate({
 80                     'scrollTop':$('.jd').eq($(this).index()).offset().top
 81                 },1000);
 82             });
 83             $('.back').click(function(){
 84                 $('html,body').animate({
 85                     'scrollTop':0
 86                 },300);
 87             })
 88         })
 89     </script>
 90 </head>
 91 <body>
 92 <div class="top">
 93     <img src="top.png" alt="" />
 94 </div>
 95 <div class="jd dian">
 96     <img src="dian.png" alt="" />
 97 </div>
 98 <div class="jd jia">
 99     <img src="jia.png" alt="" />
100 </div>
101 <div class="jd fu">
102     <img src="fu.png" alt="" />
103 </div>
104 <div class="jd mei">
105     <img src="mei.png" alt="" />
106 </div>
107 <div class="bottom">
108     <img src="bottom.png" alt="" />
109 </div>
110 <div class="subnav">
111     <ul>
112         <li>电脑数码</li>
113         <li>家电通讯</li>
114         <li>服饰精品</li>
115         <li>美容珠宝</li>
116     </ul>
117     <div class="back">返回</div>
118 </div>
119 </body>
120 </html>

 

posted @ 2018-01-01 19:05  前端极客  阅读(2479)  评论(0)  编辑  收藏  举报