需要获取一些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. 渗透测试入门DVWA 环境搭建

    DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演练系统称为靶机,下面请跟着我一起搭建DVWA测试环境.如果你有一定的基 ...

  2. rsync命令集合

    rsync -avz rsync://logs@211.151.78.206/www_logs/2014/03/27/* /mnt/hgfs/iautoslogs/

  3. 删除文件夹时提示“You need permission to perform this action。。。”,如何解决?

    Win10系统,有时,要删除某个文件夹,却提示“You need permission to perform this action...” 以下是我Google之后找到的解决方案 1.创建一个文本文 ...

  4. filterBuilders 构建过滤器query

    FilterBuilders构建过滤器Query package com.elasticsearch; import org.elasticsearch.action.ActionListener; ...

  5. 查看MySql版本号命令

    转自:https://blog.csdn.net/qq_38486203/article/details/80324014​ 这里介绍四中不同的方法,它们分别运行在不同的环境中,最后对每种方法的优劣以 ...

  6. CodeForces - 1087D

    CodeForces - 1087Dhttps://vjudge.net/problem/2115151/origin2*和/叶子结点的个数 #include<iostream> #inc ...

  7. #include <filename.h> 和 #include“filename.h” 有什么区别

    对于#include <filename.h> ,编译器从标准库路径开始搜索filename.h,对于#include “filename.h” ,编译器从用户的工作路径开始搜索filen ...

  8. Django项目:CRM(客户关系管理系统)--64--54PerfectCRM实现CRM客户报名链接

    # kingadmin.py # ————————04PerfectCRM实现King_admin注册功能———————— from crm import models #print("ki ...

  9. poj 3263

    传送门 解题思路 如果x与y互相看见,那么他们一定比之间的高,所以给他们之间的高度-1,最后得到的答案是所有牛的高度+h,之间-1会T,用差分数组或线段树维护即可. 代码 #include<io ...

  10. poj 2288

    传送门 解题思路 状压dp,记录路径条数,dp[S][i][j]表示状态为S,前一个点是i,再前一个点是j的最大值,然后在开个一样的数组记录方案数,时间复杂度O(2^n*n^2),注意要用long l ...