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操作Cookies的小例子
Oct 15 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
keras中的History对象用法
2020/06/19 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
html5 标签
2009/07/16 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
教育学习自我评价
2014/02/03 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
2014年政协工作总结
2014/12/09 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL