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开发中因空格引发的错误
Nov 08 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
微信小程序-form表单提交代码实例
Apr 29 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的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python异常处理try except过程解析
2020/02/03 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
采购主管的岗位职责
2013/12/17 职场文书
销售求职信范文
2014/05/26 职场文书
廉政承诺书
2015/01/19 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL