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


Posted in Javascript onJune 15, 2014

需要获取一些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。

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

说明要想获取当前页面上滚动条坐标的纵坐标位置:用
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 函数调用规则
Sep 14 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 #Javascript
jQuery实现的原图对比窗帘效果
Jun 15 #Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 #Javascript
js中通过父级进行查找定位元素
Jun 15 #Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 #Javascript
You might like
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
php无限极分类实现方法分析
2019/07/04 PHP
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
基于Django用户认证系统详解
2018/02/21 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python事件驱动event实现详解
2018/11/21 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
年度考核自我鉴定
2013/11/09 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
自主招生自荐信范文
2013/12/04 职场文书
超市营业员岗位职责
2013/12/20 职场文书
中学教师培训制度
2014/01/31 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
会计个人实习计划书
2014/08/15 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书