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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
vue component组件使用方法详解
Jul 14 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
PHP 裁剪图片
2021/03/09 PHP
javascript 简练的几个函数
2009/08/29 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery中:radio选择器用法实例
2015/01/03 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
浅析python参数的知识点
2018/12/10 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
小学美术教学反思
2014/02/01 职场文书
学生保证书格式
2015/02/27 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书