工具栏随屏幕滚动

工具栏原先在默认位置，然后当滚动条往下滚动，滚动条的高度>=工具栏高度的时候，工具栏就浮动然后跟随滚动条 反之，等滚动条往上滚动，滚动条的高度<=工具栏高度的时候，浮动的工具栏就消失
漂浮滚动效果无闪烁，兼容IE 6 7 8 FF等浏览器

 

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2  
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4  
  5 <head>
  6  
  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8  
  9 <title>仿淘宝 工具条</title>
 10  
 11 <style type="text/css">
 12  
 13 html,body{
 14  
 15     margin:0px;
 16  
 17     height:100%;
 18  
 19     overflow:hidden;
 20  
 21 }
 22  
 23 #autoscroll{    
 24     height:100%;
 25  
 26     overflow:auto;
 27  
 28     width:100%;
 29  
 30     text-align:center;
 31  
 32 }
 33  
 34 .box{
 35  
 36     width:960px;
 37  
 38     height:100%;    
 39     text-align:left;
 40  
 41     margin:auto;
 42  
 43 }
 44  
 45 .head{    
 46     width:958px;
 47  
 48     height:200px;
 49  
 50     border:1px solid #eb6100;
 51  
 52     margin-top:10px;
 53  
 54     margin-bottom:10px;
 55  
 56 }
 57  
 58 .tool{        
 59  
 60     width:958px;
 61  
 62     border:1px solid #eb6100;
 63  
 64     background:#FFF;
 65  
 66 }
 67  
 68 .toolabsolute{    
 69     position:absolute;    
 70     z-index:100;
 71  
 72     top:1px;
 73  
 74 }
 75  
 76 .list{
 77  
 78     width:958px;
 79  
 80     height:2400px;
 81  
 82     border:1px solid #eb6100;    
 83     margin-top:10px;
 84  
 85     margin-bottom:10px;
 86  
 87 }
 88  
 89 </style>
 90  
 91 <script src="http://www.huaian.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
 92  
 93 </head>
 94  
 95 <body>
 96  
 97         
 98  
 99 <div id="autoscroll">
100  
101     <div class="box">
102  
103         <div class="head">
104  
105         网页头部<br />
106  
107         </div>
108  
109         
110  
111         <div class="tool" id="mytool">
112  
113         热门城市：北京 西安 上海 深圳 广州 杭州 成都 南京 重庆 北京<br />
114  
115         省市首字母查找：A B C F G H J L N Q S T X Y Z
116  
117         </div>
118  
119         
120  
121         <div class="list">
122  
123         列表部分<br />
124  
125         </div>        
126  
127     </div>
128  
129 </div>
130  
131 <script language="javascript" type="text/javascript">
132  
133 $(document).ready(function(){
134  
135     var mytooltop;
136  
137     var scrolltop;
138  
139     var toolleft;
140  
141     var cloned=false;
142  
143     toolleft=$(".box").get(0).offsetLeft;
144  
145     $("#mytool").clone(true).insertAfter("#autoscroll").css("left",toolleft+"px").addClass("toolabsolute");
146  
147     $(".toolabsolute").hide();
148  
149     
150     $("#autoscroll").scroll(function(){
151  
152         mytooltop=$("#mytool").get(0).offsetTop;
153  
154         scrolltop=document.getElementById("autoscroll").scrollTop;
155  
156         if(scrolltop>=mytooltop && cloned==false){
157  
158             $(".toolabsolute").show();
159  
160             cloned=true;
161  
162         }
163  
164         if(!(scrolltop>=mytooltop) && cloned==true){
165  
166             $(".toolabsolute").hide();
167  
168             cloned=false;
169  
170         }
171  
172     })
173  
174 })
175  
176 </script>
177  
178 </body>
179  
180 </html>


posted @ 2012-01-12 11:38  Jog  阅读(215)  评论(0)    收藏  举报