JavaScript仿淘宝智能浮动，网页牢靠层代码
发布时间：2018-08-25 22:45:18 所属栏目：业界 来源：站长网
导读：在猛火网早年的教程，我们颁发过多玩游戏顶部浮动层、天边社区的顶部浮动导航条，这是当前很是风行的一种结果！刚巧，本日在月光看到一篇同样的文章，提供较早行使该结果的淘宝网，只是没有给出完备代码！ 在淘宝网中，商品列表出格长，而商品列名称始终保
|
在猛火网早年的教程，我们颁发过多玩游戏顶部浮动层、天边社区的顶部浮动导航条，这是当前很是风行的一种结果！刚巧，本日在月光看到一篇同样的文章，提供较早行使该结果的淘宝网，只是没有给出完备代码！ 在淘宝网中，商品列表出格长，而商品列名称始终保持在最顶端。假如你把转动条转动至最上边了，那么它会自动判定是否到顶端了，然后一向置顶从而不怕遮挡。 这种殊效是通过JavaScript和CSS实现的，在现实开拓中有不罕用途，下面是我找到的一个行使JavaScript建造的仿淘宝智能浮动的源代码，兼容性不错，在IE、Firefox、Chrome下都能正常事变。 在Z-Blog中行使这个殊效代码必要留意，假如在侧边栏行使，则必要留意，侧栏中的栏目不能行使JavaScript动态加载，必需用静态的名目，不然在JavaScript会错误的计较页面高度，上下转动的时辰会呈现错位征象。
以下是相干代码： jQuery 代码： Copy to Clipboard 引用的内容：[www.veryhuo.com]
(function(){ var oDiv=document.getElementById("float"); var H=0,iE6; var Y=oDiv; while(Y){H+=Y.offsetTop;Y=Y.offsetParent}; iE6=window.ActiveXObject&&!window.XMLHttpRequest; if(!iE6){ window.onscroll=function() { var s=document.body.scrollTop||document.documentElement.scrollTop; if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}} else{oDiv.className="div1";} }; } })(); HTML 代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
<div id="box"> <div id="float" class="div1"> //随转动移动的部门代码 </div> </div> CSS 代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
#box{float:left;position:relative;width:295px;} .div1{} .div2{position:fixed;_position:absolute;top:3px;z-index:295;} （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
