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 相关文章推荐
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
详解React中共享组件逻辑的三种方式
Feb 02 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP新手上路(六)
2006/10/09 PHP
PHP5 安装方法
2007/01/15 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
简单谈谈json跨域
2016/03/13 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python主线程捕获子线程的方法
2018/06/17 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
个人自我鉴定
2013/11/07 职场文书
教育学习自我评价
2014/02/03 职场文书
企业文化口号
2014/06/12 职场文书
中队活动总结
2014/08/27 职场文书
标准单位租车协议书
2014/09/23 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
小学校长开学致辞
2015/07/29 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android