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 div 居中技巧应用介绍
Nov 24 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
解决Vue watch里调用方法的坑
Nov 07 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
FCKeditor的安装(PHP)
2007/01/13 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
深入浅析Python中的yield关键字
2018/01/24 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python实现从wind导入数据
2019/12/03 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
销售助理岗位职责
2015/02/11 职场文书
计划生育工作总结2015
2015/04/03 职场文书
期中考试后的感想
2015/08/07 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android