快捷導(dǎo)航

js中的如何定位固定層的位置

更新時間：2014年06月15日 16:26:18 投稿：whsnow

這篇文章主要介紹了js中的如何定位固定層的位置,需要的朋友可以參考下

需要獲取一些HTML的對象的坐標(biāo)來更靈活的設(shè)置目標(biāo)層的坐標(biāo)，這里可以通過用到document.body.scrollTop等屬性，但是這些屬性在xhtml的標(biāo)準(zhǔn)網(wǎng)頁中或更簡單的說就是帶<!DOCTYPE...>的標(biāo)簽中得到的值是0；如果不要此標(biāo)簽則一切正常，那么在xhtml中如何獲取body的坐標(biāo)呢？當(dāng)然有辦法了，我們使用document.documentElement來取代document.body例如可以這樣寫：

復(fù)制代碼代碼如下:

var top=document.documentElement.scrollTop ||document.body.scroolTop;

js中的||是個好東西，不但可以用在if的條件語句中，而且還可以用在變量的賦值上，上例可以寫成如下格式：

復(fù)制代碼代碼如下:

 
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop; 

這樣寫可以有很好的兼容性。還要注意的一點是：如果不聲明document.documentElement.scrollTop的值反而會顯示0。

說明要想獲取當(dāng)前頁面上滾動條坐標(biāo)的縱坐標(biāo)位置：用
document.documentElement.scrollTop而不是用
document.body.scrollTop;
document.documentElement獲取的是html標(biāo)簽，
document.body獲取的是body標(biāo)簽；
在標(biāo)準(zhǔn)w3c下，document.body.scrollTop恒為0，需要用document.documentElement.scrollTop來代替;
如果我們要定位鼠標(biāo)相對于頁面的絕度位置時，會在搜索引擎中得到的大多會讓你用
event.clientX+document.body.scrollLeft ,event.clientY+document.body.scrollTop;
如果發(fā)現(xiàn)鼠標(biāo)偏離了你的想象，一點都奇怪，因為IE5.5之后就不在支持document.body.scrollX對象了
所以我們要加上一句；

復(fù)制代碼代碼如下:

 
if (document.body && document.body.scrollTop &&document.body.scrollLeft) 
{ 
top=document.body.scrollTop; 
left=document.body.scrollleft; 
} 
if (document.documentElement && document.documentElement.scrollTop&& document.documentElement.scrollLeft) 
{ 
top=document.documentElement.scrollTop; 
left=document.documentElement.scrollLeft; 
} 

下面介紹一些參數(shù)的用法：
網(wǎng)頁的可見區(qū)域?qū)挾龋篸ocument.body.clientWidth;
網(wǎng)頁的可見區(qū)域高度：document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)?document.body.offsetWidth;(包括邊線的寬);
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight;(包括邊線的寬);
網(wǎng)頁正文全文寬：document.body.scrollWidth;
網(wǎng)頁正文全文高：document.body.scrollHeight;
網(wǎng)頁被卷去的高：document.body.scrollTop;
網(wǎng)頁被卷去的左：document.body.scrollLeft;
網(wǎng)頁正文部分上:windows.screenTop;
網(wǎng)頁正文部分左：windows.screenLeft;
屏幕分辨率的高：windows.screen.height;
屏幕分辨率的寬：windows.screen.widht;
屏幕可用工作區(qū)高度：windows.screen.availHeight;
屏幕可用工作區(qū)寬度：windows.screen.availWidth;
獲取對象的滾動高度：scrollHeight;
設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離 :scrollLeft;
設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離 :scrollTop;
獲取對象的滾動寬度:scrollWidth；
獲取對象相對于版面或由父坐標(biāo)：offsetParent 屬性指定的父坐標(biāo)的高度：offsetHeight;
獲取對象相對于版面或由offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置 :offsetLeft;
獲取對象相對于版面或由offsetTop 屬性指定的父坐標(biāo)的計算頂端位置:offsetTop;
event.clientX:相對于文檔的水平坐標(biāo)；
event.clientY:相對于文檔的垂直坐標(biāo)；
event.offsetX:相對于容器的水平坐標(biāo)；
event.offsetY：相對于容器的垂直坐標(biāo)；
document.documentElement.scrollTop:設(shè)置滾動的垂直高度
event.clientX + document.documentElement.scrollTop:相對文檔的水平位置+垂直方向的滾動量；

您可能感興趣的文章: