滚动滚动栏，导航栏跟着变，点击导航栏，滚动到相应的位置
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="http://css.40017.cn/cn/min/??/cn/c/zt/2013/ztBase.css?v=13080902">
7 <script type="text/javascript" src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102"></script>
8 <style>
9 .content{
10 width: 1200px;
11 margin:0 auto;
12 }
13 .comBox{
14 height:400px;
15 }
16 #com1{
17 background: red;
18 }
19 #com2{
20 background: green;
21 }
22 #com3{
23 background: yellow;
24 }
25 .con{
26 position: relative;
27 margin: 800px 0;;
28 }
29 .float_nav{
30 width: 42px;
31 position: absolute;
32 top: 0;
33 left: -50px;
34 background: #fff;
35 }
36 .float_nav li {
37 width: 28px;
38 padding: 10px 6px 10px;
39 display: block;
40 border: 1px solid #ddd;
41 border-bottom: 0;
42 }
43 .float_nav li a {
44 font-size: 14px;
45 color: #666;
46 }
47
48 .float_nav li.at{
49 background: #50b400;
50 width: 30px;
51 border: 0;
52 }
53
54 .float_nav li.at a{
55 color:#fff;
56 }
57
58 a:focus{outline:none;}
59
60 .float_nav li.last{
61 border-bottom: 1px solid #ddd;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="content">
67 <div class="con">
68 <div class="comBox" id="com1" >
69
70 </div>
71 <div class="comBox com2" id="com2">
72
73 </div>
74 <div class="comBox com3" id="com3">
75
76 </div>
77 <div class="float_nav" id="float_nav">
78 <ul>
79 <li class="at" tar_box="com1">
80 <a href="#">我是红色</a>
81 </li>
82 <li tar_box="com2" tar_box="com2">
83 <a href="#">我是绿色</a>
84 </li>
85 <li class="last" tar_box="com3">
86 <a href="#">我是黄色</a>
87 </li>
88 </ul>
89 </div>
90 </div>
91 </div>
92 </body>
93 <script>
94 //浮动导航切换
95 var banTab = {
96 clickScroll: function () {
97 var aLink=fish.all("#float_nav li a");
98 aLink.on("click",function(e){
99 fish.preventDefault(e);
100 });
101 var aLi=fish.all("#float_nav li");
102 aLi.on("click",function(){
103 document.documentElement.scrollTop = document.body.scrollTop = fish.one("#"+fish.one(this).attr("tar_box")).offset().top;
104 })
105 },
106 autoScroll: function () {
107 fish.one(window).on("scroll",function(){
108 var wT = document.documentElement.scrollTop || document.body.scrollTop;
109 var oT = fish.one(".con").offset().top;
110 var oL = fish.one(".con").offset().left;
111
112 if(wT >= oT){
113 fish.one("#float_nav").css("position:fixed;top:0;left:"+(oL-50)+"px;");
114 }else{
115 fish.one("#float_nav").css("position:absolute;top:0;left:-50px;");
116 }
117
118 var aComBox=fish.all(".comBox");
119 var aLi=fish.all("#float_nav li");
120 aComBox.each(function(elem,i){
121 // if(wT >= fish.one(elem).offset().top && wT < (fish.one(elem).offset().top + fish.one(elem).height())){
122 if(wT >= fish.one(elem).offset().top){
123 aLi.removeClass("at");
124 fish.one(aLi[i]).addClass("at");
125 }
126 })
127 })
128 },
129 init: function () {
130 this.autoScroll();
131 this.clickScroll();
132 }
133 };
134
135 banTab.init();
136 </script>
137 </html>
时间： 2024-10-29 06:02:00