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

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

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

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

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

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

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

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

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

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

說(shuō)明要想獲取當(dāng)前頁(yè)面上滾動(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來(lái)代替;
如果我們要定位鼠標(biāo)相對(duì)于頁(yè)面的絕度位置時(shí)，會(huì)在搜索引擎中得到的大多會(huì)讓你用
event.clientX+document.body.scrollLeft ,event.clientY+document.body.scrollTop;
如果發(fā)現(xiàn)鼠標(biāo)偏離了你的想象，一點(diǎn)都奇怪，因?yàn)镮E5.5之后就不在支持document.body.scrollX對(duì)象了
所以我們要加上一句；

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

您可能感興趣的文章: