标签：
滚动滚动栏，导航栏跟着变，点击导航栏，滚动到相应的位置
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>
标签：
原文地址：http://www.cnblogs.com/serene92/p/4500445.html
