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实现倒计时和文字滚动的效果实例
Oct 29 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
原生js生成图片验证码
2020/10/11 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python循环实现n的全排列功能
2019/09/16 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
2014年派出所工作总结
2014/11/21 职场文书
运动会加油稿50字
2015/07/21 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL