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 相关文章推荐
jQuery中find()方法用法实例
Jan 07 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
js实现电灯开关效果
Jan 19 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python入门之后再看点什么好?
2018/03/05 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
班主任评语大全
2014/04/26 职场文书
党员志愿者活动方案
2014/08/28 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
茶花女读书笔记
2015/06/29 职场文书
工作感想范文
2015/08/07 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python