?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>jquery实现仿京东侧边栏
原文地址：https://www.cnblogs.com/yangguoe/p/8168523.html