JS實現(xiàn)兼容性好,自動置頂?shù)奶詫殤腋」ぞ邫谛Ч?/h1>
更新時間：2015年09月18日 16:58:37 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)兼容性好,自動置頂?shù)奶詫殤腋」ぞ邫谛Ч?涉及JavaScript動態(tài)判斷頁面元素位置及樣式設(shè)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)兼容性好,自動置頂?shù)奶詫殤腋」ぞ邫谛Ч?。分享給大家供大家參考。具體如下：
這是一款兼容性好，自動置頂?shù)奶詫殤腋」ぞ邫?，如果你把滾動條滾動至最上邊了，那么它會自動判斷是否到頂端了，然后一直置頂從而不怕遮擋，其實明白了這種思路，你就能舉一返三了，演示一下看看效果。
運(yùn)行效果截圖如下：
在線演示地址如下：
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程序設(shè)計有所幫助。
相關(guān)文章
-
去年年底開發(fā)了一個手機(jī)站平臺，遇到了很多坎，今天小編給大家分享下使用JS跳轉(zhuǎn)手機(jī)站url的若干注意事項，需要的朋友參考下吧 2017-10-10
-
最好用的JS圖像無縫滾動腳本，根據(jù)需要改改寬度和圖像個數(shù)就可以了,需要的朋友可以參考下 2014-02-02
-
這篇文章主要介紹JavaScript的三種this指向的方法：call()、bind()、apply()，文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下 2023-05-05
-
countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2019-10-10
-
JavaScript中fromCharCode 和 fromCodePoint 的詳解與應(yīng)
本文將詳細(xì)介紹 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,這兩個方法能夠幫助開發(fā)者高效地處理字符與編碼之間的轉(zhuǎn)換,理解它們的區(qū)別與應(yīng)用,將讓你的代碼更加靈活和高效,感興趣的朋友跟隨小編一起看看吧 2024-12-12
-
JS前端開發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作（小結(jié)）
這篇文章主要介紹了JS前端開發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作,非常不錯，具有參考借鑒價值，需要的朋友可以參考下 2017-02-02
-
CSS和JS標(biāo)簽style屬性對照表(方便js開發(fā)的朋友)
CSS和JS標(biāo)簽style屬性對照表(方便js開發(fā)的朋友)，需要的朋友可以收藏下。 2010-11-11
-
Javascript原生的String處理函數(shù)顯得很不夠豐富 2010-04-04
-
這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下 2015-03-03
-
本文給大家分享的是類似QQ窗口的抖動效果,只是覺得好玩，沒什么技術(shù)含量，推薦給大家，有需要的小伙伴可以參考下。 2015-05-05
最新評論
本文實例講述了JS實現(xiàn)兼容性好,自動置頂?shù)奶詫殤腋」ぞ邫谛Ч?。分享給大家供大家參考。具體如下：
這是一款兼容性好，自動置頂?shù)奶詫殤腋」ぞ邫?，如果你把滾動條滾動至最上邊了，那么它會自動判斷是否到頂端了，然后一直置頂從而不怕遮擋，其實明白了這種思路，你就能舉一返三了，演示一下看看效果。
運(yùn)行效果截圖如下：
在線演示地址如下：
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程序設(shè)計有所幫助。
相關(guān)文章
- 去年年底開發(fā)了一個手機(jī)站平臺，遇到了很多坎，今天小編給大家分享下使用JS跳轉(zhuǎn)手機(jī)站url的若干注意事項，需要的朋友參考下吧2017-10-10
- 最好用的JS圖像無縫滾動腳本，根據(jù)需要改改寬度和圖像個數(shù)就可以了,需要的朋友可以參考下2014-02-02
- 這篇文章主要介紹JavaScript的三種this指向的方法：call()、bind()、apply()，文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
-
countUp.js實現(xiàn)數(shù)字動態(tài)變化效果
這篇文章主要為大家詳細(xì)介紹了countUp.js實現(xiàn)數(shù)字動態(tài)變化效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10 -
JavaScript中fromCharCode 和 fromCodePoint 的詳解與應(yīng)
本文將詳細(xì)介紹 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,這兩個方法能夠幫助開發(fā)者高效地處理字符與編碼之間的轉(zhuǎn)換,理解它們的區(qū)別與應(yīng)用,將讓你的代碼更加靈活和高效,感興趣的朋友跟隨小編一起看看吧2024-12-12 -
JS前端開發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作（小結(jié)）
這篇文章主要介紹了JS前端開發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02 -
CSS和JS標(biāo)簽style屬性對照表(方便js開發(fā)的朋友)
CSS和JS標(biāo)簽style屬性對照表(方便js開發(fā)的朋友)，需要的朋友可以收藏下。2010-11-11 - Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04
- 這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
- 本文給大家分享的是類似QQ窗口的抖動效果,只是覺得好玩，沒什么技術(shù)含量，推薦給大家，有需要的小伙伴可以參考下。2015-05-05