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 解析Json字符串的性能比较分析代码
Dec 16 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
easyui validatebox验证
Apr 29 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 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日历[测试通过]
2008/03/27 PHP
PHP $_SERVER详解
2009/01/16 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
一个SQL面试题
2014/08/21 面试题
关于责任的演讲稿
2014/05/20 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
音乐会主持人开场白
2015/05/28 职场文书
舞出我人生观后感
2015/06/16 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL