兼容性好，自动置顶的淘宝悬浮工具栏

2024-09-05 12:20:42

字体：大中小

来源：转载

供稿：网友

兼容性好，自动置顶的淘宝悬浮工具栏，如果你把滚动条滚动至最上边了，那么它会自动判断是否到顶端了，然后一直置顶从而不怕遮挡，其实明白了这种思路，你就能举一返三了，演示一下看看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>兼容IE6的淘宝悬浮工具栏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,html{margin:0;padding:0;font-size:12px;font-family:Arial;font:12px/1 Helvetica, Tahoma, Arial, /5b8b/4f53, sans-serif;background:url() fixed}#float{background:url(/jscss/demoimg/201010/tb2.png) no-repeat -12px -37px;width:744px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0}#box{position:relative;height:500px;width:744px;background:#ddd url(/jscss/demoimg/201010/506384_1270823833Kkk2.jpg) no-repeat;}</style> </head> <body> <div style="height:300px;background:#eee"></div> <div id="box"><div id="float" ></div></div> <div style="height:1000px;background:#eee"></div> </body> <script type="text/javascript">var IO=document.getElementById('float'),Y=IO,H=0,IE6;IE6=window.ActiveXObject&&!window.XMLHttpRequest;while(Y){H+=Y.offsetTop;Y=Y.offsetParent};if(IE6)    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";window.onscroll=function (){    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);    if(s>H&&IO.fix||s<=H&&!IO.fix)return;    if(!IE6)IO.style.position=IO.fix?"":"fixed";            IO.fix=!IO.fix;};try{document.execCommand("BackgroundImageCache",false,true)}catch(e){}; //]]></script> </html>

上一篇：兼容好带缓冲的动感网页右键菜单

下一篇：jQuery实现表格颜色的交替显示

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注