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

 更新时间:2014年06月15日 16:26:18   投稿:whsnow  
这篇文章主要介绍了js中的如何定位固定层的位置,需要的朋友可以参考下
需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0;如果不要此标签则一切正常,那么在xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写:
复制代码 代码如下:

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

js中的||是个好东西 ,不但可以用在if的条件语句中,而且还可以用在变量的赋值上,上例可以写成如下格式:
复制代码 代码如下:

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

这样写可以有很好的兼容性。还要注意的一点是:如果不声明document.documentElement.scrollTop的值反而会显示0。



说明要想获取当前页面上滚动条坐标的纵坐标位置:用
document.documentElement.scrollTop而不是用
document.body.scrollTop;
document.documentElement获取的是html标签,
document.body获取的是body标签;
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
如果我们要定位鼠标相对于页面的绝度位置时,会在搜索引擎中得到的大多会让你用
event.clientX+document.body.scrollLeft ,event.clientY+document.body.scrollTop;
如果发现鼠标偏离了你的想象,一点都奇怪,因为IE5.5之后就不在支持document.body.scrollX对象了
所以我们要加上一句;
复制代码 代码如下:

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;
}

下面介绍一些参数的用法:
网页的可见区域宽度:document.body.clientWidth;
网页的可见区域高度:document.body.clientHeight;
网页可见区域宽:document.body.offsetWidth;(包括边线的宽);
网页可见区域高:document.body.offsetHeight;(包括边线的宽);
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页被卷去的高:document.body.scrollTop;
网页被卷去的左:document.body.scrollLeft;
网页正文部分上:windows.screenTop;
网页正文部分左:windows.screenLeft;
屏幕分辨率的高:windows.screen.height;
屏幕分辨率的宽:windows.screen.widht;
屏幕可用工作区高度:windows.screen.availHeight;
屏幕可用工作区宽度:windows.screen.availWidth;
获取对象的滚动高度:scrollHeight;
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 :scrollLeft;
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 :scrollTop;
获取对象的滚动宽度:scrollWidth;
获取对象相对于版面或由父坐标:offsetParent 属性指定的父坐标的高度 :offsetHeight;
获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置 :offsetLeft;
获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置:offsetTop;
event.clientX:相对于文档的水平坐标;
event.clientY:相对于文档的垂直坐标;
event.offsetX:相对于容器的水平坐标;
event.offsetY:相对于容器的垂直坐标;
document.documentElement.scrollTop:设置滚动的垂直高度
event.clientX + document.documentElement.scrollTop:相对文档的水平位置+垂直方向的滚动量;

相关文章

  • javascript开发中因空格引发的错误

    javascript开发中因空格引发的错误

    最近写一个关于用JavaScript做图片自动切换问题发现一个非常奇特的问题,除了空格和换行外完全相同的代码,在Firefox下却有截然不同的运行结果,今天记录以提供他人留意及自我备查。
    2010-11-11
  • 只需五句话搞定JavaScript作用域(经典)

    只需五句话搞定JavaScript作用域(经典)

    javascript作用域是前端开发比较难理解的知识点,下面小编给大家提供五句话帮助大家很快的了解js作用域,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • Js base64 加密解密介绍

    Js base64 加密解密介绍

    想必大家对base64并不陌生吧,在本文将为大家介绍下Js中的base64加密解密过程,感兴趣的朋友不要错过
    2013-10-10
  • JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法

    JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法

    这篇文章主要介绍了JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法,因转换的字符串数字都以0开头,导致parseInt函数在浏览器和Android WebView中转换结果不一样,本文给出了解决方法,需要的朋友可以参考下
    2015-04-04
  • JavaScript中的宏任务和微任务执行顺序

    JavaScript中的宏任务和微任务执行顺序

    在 JavaScript 中,宏任务和微任务是指在执行代码的过程中的两种不同的任务类型,这篇文章主要介绍了JavaScript中的宏任务和微任务执行顺序,需要的朋友可以参考下
    2022-12-12
  • 浅谈Rx响应式编程

    浅谈Rx响应式编程

    在学习Rx编程的过程中,理解Observable这个概念至关重要,常规学习过程中,通常需要进行多次碰壁才能逐渐开悟。这个有点像小时候学骑自行车,必须摔几次才能掌握一样。当然如果有办法能言传,则可以少走一些弯路,尽快领悟Rx的精妙
    2021-06-06
  • IntelliJ IDEA 安装vue开发插件的方法

    IntelliJ IDEA 安装vue开发插件的方法

    本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 原生JS实现ajax与ajax的跨域请求实例

    原生JS实现ajax与ajax的跨域请求实例

    下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序的线程架构【推荐】

    微信小程序的线程架构【推荐】

    这篇文章主要介绍了微信小程序的线程架构,每个小程序包含一个描述整体程序的app实例和多个描述页面的page,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • js获取css的各种样式并且设置他们的方法

    js获取css的各种样式并且设置他们的方法

    下面小编就为大家带来一篇js获取css的各种样式并且设置他们的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论