js中的如何定位固定層的位置
var top=document.documentElement.scrollTop ||document.body.scroolTop;
js中的||是個(gè)好東西 ,不但可以用在if的條件語(yǔ)句中,而且還可以用在變量的賦值上,上例可以寫成如下格式:
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ì)象了
所以我們要加上一句;
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è)的可見區(qū)域?qū)挾龋篸ocument.body.clientWidth;
網(wǎng)頁(yè)的可見區(qū)域高度:document.body.clientHeight;
網(wǎng)頁(yè)可見區(qū)域?qū)?document.body.offsetWidth;(包括邊線的寬);
網(wǎng)頁(yè)可見區(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ì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離 :scrollLeft;
設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(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)量;
- JS實(shí)現(xiàn)固定在右下角可展開收縮DIV層的方法
- js固定DIV高度,超出部分自動(dòng)添加滾動(dòng)條的簡(jiǎn)單方法
- js 固定懸浮效果實(shí)現(xiàn)思路代碼
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- js實(shí)現(xiàn)簡(jiǎn)單的左右兩邊固定廣告效果實(shí)例
- js DIV滾動(dòng)條隨機(jī)位置的設(shè)置技巧
- js,jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- javascript 獲取頁(yè)面的高度及滾動(dòng)條的位置的代碼
- javascript 精確獲取頁(yè)面元素的位置
- JS簡(jiǎn)單實(shí)現(xiàn)DIV相對(duì)于瀏覽器固定位置不變的方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)MUI數(shù)字輸入框效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01微信小程序圖片選擇區(qū)域裁剪實(shí)現(xiàn)方法
本篇文章主要介紹了微信小程序圖片選擇區(qū)域屏裁剪實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)易數(shù)碼時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03當(dāng)鼠標(biāo)滑過(guò)文本框自動(dòng)選中輸入框內(nèi)容的JS代碼分享
這篇文章主要介紹了當(dāng)鼠標(biāo)滑過(guò)文本框自動(dòng)選中輸入框內(nèi)容的JS代碼,有需要的朋友可以參考一下2013-11-11JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-05-05理解JavaScript設(shè)計(jì)模式中的單例模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的單例模式,單例模式即Singleton?Pattern是最簡(jiǎn)單的設(shè)計(jì)模式之一,下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-04-04用js控制組織結(jié)構(gòu)圖可以任意拖拽到指定位置
用js控制生成了一個(gè)組織結(jié)構(gòu)圖并設(shè)置這個(gè)組織結(jié)構(gòu)可以任意拖動(dòng)到指定位置,具體代碼如下2014-01-01JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng)),需要的朋友可以參考下2017-06-06