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 18 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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 上传文件的方法(类)
2009/07/30 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
js中的string.format函数代码
2020/08/11 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
python 快速排序代码
2009/11/23 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
给分销商的致歉信
2014/01/14 职场文书
初中语文教学反思
2014/02/02 职场文书
企业军训感言
2014/02/08 职场文书
工作态度检讨书
2014/02/11 职场文书
原材料检验岗位职责
2014/03/15 职场文书
说明书范文
2014/05/07 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
社区敬老月活动总结
2015/05/07 职场文书
民事起诉书范本
2015/05/19 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL