需要获取一些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:相对文档的水平位置+垂直方向的滚动量;

 
 

js中的如何定位固定层的位置的更多相关文章

  1. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  2. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  3. JS中各种宽度、高度、位置、距离总结

    1.window.screen 浏览器与屏幕的距离,screenX(screenLeft),screenY(screenTop) 2.window.scrollTo(x,y) 将纵向滚动条移动到相对于 ...

  4. js中json的添加和指定位置的删除

    0]绑定数据 grid = $("#Grid").datagrid({ fit: true, rownumbers: true, fitColumns: true, height: ...

  5. [No000067]Js中获取当前页面的滚动条纵坐标位置scrollTop

    三种方法任选其一: var sTop = document.body.scrollTop+document.documentElement.scrollTop; var sTop = document ...

  6. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  7. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  8. Js中的各种高度问题

    一.屏幕宽高相关 屏幕高度就是你的整个屏幕高度(开机会亮的那片区域的高度),相关的其他高度划分很简单,就是以任务栏为分界线从而分为两部分. screen.height :屏幕高度. screen.wi ...

  9. JavaScript基础(3)-JS中的面向对象、定时器、BOM、位置信息

    一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...

随机推荐

  1. Sharepoint常见概念

    有待补充: 1.环境部署(AD+DNS+SQL+SharePoint前端): SharePoint基本都是这样的结构,可以在多台服务器中,也就是场,当然也可以在一台服务器上.说说这几部分的功能 (1) ...

  2. Delphi的日志库

    1. 安装 Log4D下载: 官网地址 LoggerPro下载 GitHub地址 特点: log4d简单易用.性能稳定 LoggerPro貌似功能很强大,只是没有详细的文档,懒得翻源码 安装步骤 Lo ...

  3. cdh_hadoop下载地址

    http://archive.cloudera.com/cdh5/cdh/5/

  4. 2019-9-2-C#判断文件属于文本或二进制

    title author date CreateTime categories C#判断文件属于文本或二进制 lindexi 2019-09-02 12:57:37 +0800 2018-2-13 1 ...

  5. 2018-10-31-C#-7.0-使用下划线忽略使用的变量

    title author date CreateTime categories C# 7.0 使用下划线忽略使用的变量 lindexi 2018-10-31 14:4:9 +0800 2018-10- ...

  6. 搭建一个Semantic-ui项目

    一.进入到项目目录 npm init 二.安装semantic-ui npm install semantic-ui --save 三.编译输出semantic-ui cd  ./semantic g ...

  7. iTerm2配色和去掉profile提示框

    效果: 配色方案代码地址: https://github.com/mbadolato/iTerm2-Color-Schemes 点击最右边的绿色区域,再点击  “import”, 打开刚下载解压好的文 ...

  8. PHP--自动回调接口,分批修改数据

    /** * 修复 a表 生日格式问题 * @author qin */ public function update_birthday_one() { $this->load->model ...

  9. 装配SpringBean(三)--XML方式实例

    前一篇文章中已经介绍了XML方式装配bean的方式,本文将综合这些方式举一个实例并进行测试,我会把所有类型的参数都放在同一个类中进行测试,下面是我的类结构: 上图是我画的一个基本结构,可以看出该类中有 ...

  10. csdn vip文章:使用matlab模拟镜头失真

    原文地址 https://blog.csdn.net/lircsszz/article/details/80249017 最近在研究图像校正,现将镜头失真中常见的径向畸变(radial distort ...