JS實現兼容性好,自動置頂的淘寶懸浮工具欄效果
編輯：關於JavaScript
本文實例講述了JS實現兼容性好,自動置頂的淘寶懸浮工具欄效果。分享給大家供大家參考。具體如下：
這是一款兼容性好，自動置頂的淘寶懸浮工具欄，如果你把滾動條滾動至最上邊了，那麼它會自動判斷是否到頂端了，然後一直置頂從而不怕遮擋，其實明白了這種思路，你就能舉一返三了，演示一下看看效果。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-tb-float-top-tools-menu-codes/
具體代碼如下：
<!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(images/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(images/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>
希望本文所述對大家的JavaScript程序設計有所幫助。
小編推薦
熱門推薦