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>
原文地址：https://www.cnblogs.com/yangguoe/p/8168523.html
时间： 2024-11-06 03:53:59