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. filebeat -> logstash -> elasticsearch -> kibana ELK 日志收集搭建

    Filebeat 安装参考 http://blog.csdn.net/kk185800961/article/details/54579376 elasticsearch 安装参考http://blo ...

  2. Storm业务功能

    监控平台当前使用storm对日志进行流式分析计算,用于支撑监控数据清洗,后来逐渐在storm上搭建起数据在线关联,数据离线关联,明细数据清洗,日志搜索等功能,本章节对各功能进行简要概述. 对storm ...

  3. 学习笔记︱Nvidia DIGITS网页版深度学习框架——深度学习版SPSS

    DIGITS: Deep Learning GPU Training System1,是由英伟达(NVIDIA)公司开发的第一个交互式深度学习GPU训练系统.目的在于整合现有的Deep Learnin ...

  4. Scheme change not implemented

    1.错误描述 2.错误原因 由于在改变Java代码中的方法或运行代码出现,导致Tomcat编译的代码不能替换工作空间的代码,即不能及时同步,出现错误 3.解决办法 (1)关闭Tomcat,clean一 ...

  5. （二十）java小练习二

    练习4:定义一个整数数组,编写程序求出一个数组的基数和偶数个数 package demo; /*  * 定义一个整数数组,编写程序求出一个数组的基数和偶数个数  */ public class Tes ...

  6. Java web切面编程

    在我们的 web开发中  我们在 对公用的 一些方法 我们需要抽取出来   这样达到 代码的冗余   今天 我利用项目上用的AOP的 实际 应用做了一个整理 首先  xml配置  扫描 <?xm ...

  7. C#简单工厂和抽象类的实例

    using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...

  8. 石子归并 51Nod - 1021

    N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石子数记为该次合并的代价.计算将N堆石子合并成一堆的最小代价.   例如: 1 2 3 4,有 ...

  9. babel-runtime和babel-polyfill两者区别优缺点

    先说两种方式的原理: babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps ...

  10. freemarker中的round、floor和ceiling数字的舍入处理（十七）

    1.简易说明 (1)round:四舍五入 (2)floor:向下取整 (3)ceiling:向上取整 2.举例说明 <#--freemarker中的round.floor和ceiling数字的舍 ...