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>