仿淘宝智能浮动的工具条,基于jQuery实现

发布时间：2018-08-22 18:43 所属栏目：[运营] 来源：站长网

导读：烈73火87网(LieHuo36.Net)网页特效教12程仿淘宝智能浮动的工具条，基于 jQuery 实现，智能判断滚动条是否移动到了页面的最顶部，如果是，则浮动至最顶部，以至于不受滚动条的影响；当滚动条滚回来的时候，它同样为判断是否滚到了自己原来的默认位置，如果

　　烈73火87网(LieHuo36.Net)网页特效教12程仿淘宝智能浮动的工具条，基于jQuery实现，智能判断滚动条是否移动到了页面的最顶部，如果是，则浮动至最顶部，以至于不受滚动条的影响；当滚动条滚回来的时候，它同样为判断是否滚到了自己原来的默认位置，如果是，则恢复到最先的位置，与原网页融为一体，为了演示快速，工具条没怎么美化，你完全可以根据自己的网页风格美化。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>仿淘宝智能浮动的工具条 - LIEHUO.NET</title> <style type="text/css"> html,body{ margin:0px; height:100%; overflow:hidden; } #autoscroll{ height:100%; overflow:auto; width:100%; text-align:center; } .box{ width:960px; height:100%; text-align:left; margin:auto; } .head{ width:958px; height:200px; border:1px solid #eb6100; margin-top:10px; margin-bottom:10px; } .tool{ width:958px; border:1px solid #eb6100; background:#FFF; } .toolabsolute{ position:absolute; z-index:100; top:1px; } .list{ width:958px; height:2400px; border:1px solid #eb6100; margin-top:10px; margin-bottom:10px; } </style> <script src="/uploads/common/js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script> </head> <body> <div id="autoscroll"> <div class="box"> <div class="head"> 网页头部<br /> </div> <div class="tool" id="mytool"> 热门城市：北京西安上海深圳广州杭州成都南京重庆北京<br /> 省市首字母查找：A B C F G H J L N Q S T X Y Z </div> <div class="list"> 列表部分<br /> </div> </div> </div> <script language="javascript" type="text/javascript"> $(document).ready(function(){ var mytooltop; var scrolltop; var toolleft; var cloned=false; toolleft=$(".box").get(0).offsetLeft; $("#mytool").clone(true).insertAfter("#autoscroll").css("left",toolleft+"px").addClass("toolabsolute"); $(".toolabsolute").hide(); $("#autoscroll").scroll(function(){ mytooltop=$("#mytool").get(0).offsetTop; scrolltop=document.getElementById("autoscroll").scrollTop; if(scrolltop>=mytooltop && cloned==false){ $(".toolabsolute").show(); cloned=true; } if(!(scrolltop>=mytooltop) && cloned==true){ $(".toolabsolute").hide(); cloned=false; } }) }) </script> </body> </html> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

【免责声明】本站内容转载自互联网，其相关言论仅代表作者个人观点绝非权威，不代表本站立场。如您发现内容存在版权问题，请提交相关链接至邮箱：bqsm@foxmail.com，我们将及时予以处理。