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常见注意事项
Jan 01 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
微信小程序实现简单表格
Feb 14 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
PHP生成便于打印的网页
2006/10/09 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JavaScript修改css样式style
2008/04/15 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
高中生职业规划范文
2014/03/09 职场文书
销售提升方案
2014/06/07 职场文书
小学语文教研活动总结
2014/07/01 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers