需要获取一些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. Windows进程创建的流程分析

    .   创建进程的大体流程:   创建进程的过程就是构建一个环境,这个环境包含了很多的机制 (比如自我保护, 与外界通信等等). 构建这个环境需要两种"人"来协调完成(用户态和内核 ...

  2. VS2010-MFC(MFC应用程序框架分析)

    转自:http://www.jizhuomi.com/software/145.html 一.SDK应用程序与MFC应用程序运行过程的对比 程序运行都要有入口函数,在之前的C++教程中都是main函数 ...

  3. nginx部署为HTTP代理支持CONNECT模式

    有个软件要走http代理,想着部署nginx起来用,结果发现用不了: 而用ccproxy的话,一切正常: 抓包分析了下,是CONNECT模式的请求 从nginx的官网http://nginx.org/ ...

  4. AlexNet结构图详解

  5. [51nod-1364]最大字典序排列

    [51nod-1364]最大字典序排列 Online Judge:51nod-1364 Label:线段树,树状数组,二分 题目描述 题解: 根据题意很容易想到60%数据的\(O(N^2logN)\) ...

  6. jiba中文分词原理

    中文分词就是将一个汉字序列分成一个一个单独的词. 现有的分词算法有三大类: 基于字符串匹配的分词:机械分词方法,它是按照一定的策略将待分析的字符串与一个充分大的机器词典中的词条进行匹配,若在词典中找到 ...

  7. csp-s模拟43,44 A,C,F

    题面:https://www.cnblogs.com/Juve/articles/11534880.html A: T可以写成如下形式:$T=b^k*S+m*a$, 其中$m=\sum\limits_ ...

  8. HZOI20190903模拟36 字符,蛋糕,游戏

    题面:https://www.cnblogs.com/Juve/articles/11461528.html A:字符 暴力模拟一下,细节很多,但是暴力思路都不大一样 先枚举循环节长度,然后处理一个b ...

  9. bzoj4788: [CERC2016]Bipartite Blanket

    2019.1.9交流题,现在看还是不会,,, 如果只有一边,那么Hall定理即可. 两边?分别满足Hall定理,就是合法的! 证明(构造方案): 左集合先任意形成一个合法匹配,单点增量加入右集合和与右 ...

  10. mysql大数据表优化

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...