需要获取一些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. 在Xsheel Linux上安装nodejs和npm

    最近window系统转向linux系统开发,linux系统的确适合程序员的开发. 作为前端安装了nodejs和npm,遇到了一些坑,赶紧记录下来 第一种安装方法:安装nodejs  : sudo  a ...

  2. iOS开发UIView.h简介

    1.UICoordinateSpace不同坐标空间的坐标切换 @protocol UICoordinateSpace <NSObject> //将当前的坐标空间点转换到指定的坐标空间 - ...

  3. 2019年6月份Github上最热门的开源项目排行出炉,一起来看看本月上榜的开源项目

    6月份Github上最热门的开源项目排行出炉,一起来看看本月上榜的开源项目有哪些: 1. the-art-of-command-line https://github.com/jlevy/the-ar ...

  4. Glassfish安装、基本使用、在idea中配置Glassfish

    Glassfish安装.基本使用. 一.glassfish简介 glassfish是一款web应用服务器,和tomcat一样,也是一款优秀的Servlet容器. 二.glassfish知识点 1.do ...

  5. 微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)

    直接上图: 拼团列表.拼团详情-倒计时                                    //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...

  6. GitHub:如何构建一个股票市场知识图谱?(附代码&链接)

    来源:专知 本文约 600007 董事⻓/董事 高燕 女 60 600007 执⾏董事 刘永政 男 50 600008 董事⻓/董事 ··· ··· ··· ··· ··· 注:建议表头最好用相应的英 ...

  7. JavaWEB过滤器和监听器技术

    过滤器介绍 什么是过滤器 生活中的例子: 滤水器,口罩,杯子上滤网,渔网 生活中的过滤器:留下我们想要的,排除,我们不想要的. 高考: 只有分数够高的同学才能进入理想的大学.有一部分同学被拦截在大学之 ...

  8. idea查看jar冲突和解决方法

    选中Dependencies,点上边那个按钮,出现下图 依赖图太小了,根本没法看啊?好办,点击鼠标右键,呼出右键菜单栏,然后点击Actual Size: 如果我们仔细观察上图,会发现在项目依赖图中,有 ...

  9. MapReduce 图解流程

    Anatomy of a MapReduce Job In MapReduce, a YARN application is called a Job. The implementation of t ...

  10. [转]WPF中的ControlTemplate(控件模板)

    WPF中的ControlTemplate(控件模板)                                                                           ...