1. 程式人生 > >如何製作自動置頂的懸浮工具條(相容IE6)?

如何製作自動置頂的懸浮工具條(相容IE6)?

扒拉異次元分享工具條的同時,因為前面沒有解決當滾動條滾過分享工具條的時候,工具條的CSS會改變格式,會改為position:fixed; top:0px。經過一番研究,發現應該是用JS來計算工具條的位置,然後在計算滾動條的位置,這樣當滾過工具條時,重新設定工具條的CSS樣式就可以了。查了下相關的資料,簡單的寫了一個,程式碼如下:

<!-- 滾動後分享工具條改變CSS style -->
<script type="text/javascript">
var IO=document.getElementById('你的CSS id'),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.style.top="0px"};
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>
</script>

程式碼中對IE的版本進行了判斷,做了不同情況的處理,所以完全相容IE6,不過還是有待測試,因為我沒有IE6的環境。現在再看看百度分享工具條的樣子,看起來舒服多了。

圖我就不多貼了,大家可以通過拖動滾動條來看看效果。不過可惜的是還有一個問題沒解決,就是前一篇後一篇的問題,包括title,還是有一個莫名的尖括號出來,煩惱。。。。。 等解決完這個問題就分享這個工具條給大家。