zoukankan html css js c++ java

scroll02-滚动时显示当前主题菜单状态

滚动滚动栏，导航栏跟着变，点击导航栏，滚动到相应的位置

  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>

View Code

查看全文

相关阅读:
Mybatis基础最后一篇。缓存，实体类序列化（例子：public class User implements Serializable)
Mybatis基础 lombok插件常用注解（待更）
mysql面试题，主从复制，读写分离
 Java并发编程实战笔记—— 并发编程1
Redis——发布和订阅
 Redis——基础使用
 javacv——读取摄像头的图像、截取视频的画面
 LeetCode——372. Super Pow
Java——数组
 Java——擦除

原文地址：https://www.cnblogs.com/serene92/p/4500445.html