仿淘宝智能浮动的器材条,基于jQuery实现

发布时间：2018-09-01 20:44:33 所属栏目：运营来源：站长网

导读：烈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>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要