jq

获取浏览器显示区域(可视区域)的高度 :
$(window).height();
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 :
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

js:

 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

document.documentElement.scrollTop //firefox

document.documentElement.scrollLeft //firefox

document.body.scrollTop //IE

document.body.scrollLeft //IE

等同于:

$(window).scrollTop()

$(window).scrollLeft()

网页工作区域的高度和宽度  

document.documentElement.clientHeight// IE firefox  

等同于:

$(window).height()

元素距离文档顶端和左边的偏移值  

 obj.offsetTop //IE firefox

 obj.offsetLeft //IE firefox

等同于:

obj.offset().top

 obj.offset().left

简单实例(监控元素在可见视图中)

  效果:当元素出现在可见区域时,改变其css样式(背景色变红);

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>监控元素出现在视图中</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
p {
height: 30px;
line-height: 30px;
background: #f3f3f3;
opacity: ;
}
</style>
</head> <body>
<div class="main">
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
<p>你好,china!</p>
</div>
</body>
<script>
function Show() {
var Height = $(window).height();
$('p').not('.none').each(function(ind) {
var Top = $(this).offset().top; //元素距离顶部距离
var scroll = $(document).scrollTop(); //滚动高度
console.log(Top + ' ' + scroll);
if(Top - Height - scroll <= ) {
setTimeout(function() {
$('p').not('.none').eq(ind).addClass('show').css('background', 'red').animate({
opacity:
}, );
}, );
}
});
}
$(function() {
var Height = $(window).height(); //窗口高度
console.log('可视高度:' + Height);
$('.main').find('*').each(function() {
var Top = $(this).offset().top;
if(Top - Height <= ) {
$(this).addClass('none').css({
'background': '#09f',
'opacity':
});
}
});
$(window).scroll(function() {
Show();
})
})
</script> </html>

js获取元素的滚动高度,和距离顶部的高度的更多相关文章

  1. js获取元素到屏幕左上角的距离

    开发过程中经常会遇到 获取元素到屏幕左上角的距离, 当我们使用jQuery开发时,我们可以使用 $.offset()来获取准确的距离. 如果我们的项目中并没有引入jQuer的话,跟希望通过原生方法实现 ...

  2. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  3. js计算元素距离顶部的高度及元素是否在可视区判断

    前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...

  4. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  5. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  6. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  7. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  8. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  9. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

随机推荐

  1. 如何学习 MFC ?

    //std::string => CString std::string srcString = "Hello World!"; CString dstString = CS ...

  2. python实现汉诺塔移动

    汉诺塔问题 汉诺塔是根据一个传说形成的一个问题.汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大 ...

  3. MongoDB的DBREF 使用.

    首先要记一下根据 DBREF 的ObjectId 以及根据 ref 集合为条件查询问题. 在不同的可视化客户端里面显示的问题. //某客户端显示这样,直接CMD查询也是这样显示.这样我无法看懂find ...

  4. 关键字final的用法

    final关键字可以用来修饰类.方法和变量. 1.final修饰的类不能被继承. 2.final修饰的方法不能被重写. 3.final修饰的变量是常量,不能修改其值.

  5. ImportError: No module named 'Box2D' 解决办法

    ImportError: No module named 'Box2D'这个问题是由于缺少gym Openai gym是一个用于开发和比较RL算法的工具包,与其他的数值计算库兼容,如tensorflo ...

  6. 使用simhash库来进行网页去重

    首先感谢作者yanyiwu贡献的开源项目https://github.com/yanyiwu/simhash.在做项 目过程中,翻了一遍<这就是搜索引擎  核心技术详解>这本书的查重算法, ...

  7. 工作中常用的linux命令(2)

    1.find :查找指定文件名的路径: 列出当前目录以及子目录中的所有文件: 在当前目录下寻找特定文件名的文件: 列出长度为零的文件: 2.ps :查看某个程序的进程,例如查询mongodb和mysq ...

  8. Python Numpy包安装

    1,下载python 下载地址: https://www.python.org/downloads/windows/ 2,配置python环境变量 在电脑的系统属性的系统变量path中添加python ...

  9. C# 中?和??的用法

    最近在看官方的源码时,经常看到有 Int? sum; 和 FileProvider = FileProvider ??builder.GetFileProvider(); 一个问号: 很多数据类型时不 ...

  10. ArcGIS API for JavaScript 4.4 版本加载谷歌地图

    ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...