<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <style>

    body { height: 2000px; position: relative;}

    .box {

      position: absolute;

      z-index: 9;

      left: 0;

      top: 1000px;

      width: 100px;

      height: 100px;

      background-color: #f45;

    }

  </style>

</head>

<body>

  <div class="box"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>

    (function ($) {

      $(document).on('scroll', function () {

        var obj = $('.box');

        var clientHeight = $(window).height();

        var scrollTop = $(document).scrollTop();

        var offsetTop = obj.offset().top;

        var objHeight = obj.height();

        if(offsetTop < scrollTop + clientHeight && offsetTop + objHeight > scrollTop) {

          console.log('u can see me!')

        }

      })

      window.onscroll = function () {

        var obj = document.getElementsByClassName('box')[0];

        var clientHeight = window.innerHeight;

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var offsetTop = obj.offsetTop;

        var objHeight = obj.offsetHeight;

        if(offsetTop < scrollTop + clientHeight && offsetTop + objHeight > scrollTop) {

          console.log('u can see me!')

        }

      }

    })(jQuery);

  </script>

</body>

</html>

jq、js判断元素是否在可视区域内的更多相关文章

  1. 如何判断元素是否在可视区域内--getBoundingClientRect

    介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...

  2. Vue-懒加载(判断元素是否在可视区域内)

    上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...

  3. 如何判断元素是否在可视区域ViewPort

    个性签名: 生如夏花,逝如冬雪:人生如此,何悔何怨. 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth,clientWidth,scrollWidth,scrollTop这几个 ...

  4. 使用jQuery判断元素是否在可视区域

    $("#app").offset().top; offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app" ...

  5. 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  6. js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  7. javascript判断某种元素是否进入可视区域

    判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域 找到几个关键因素: sTop= $(window).scrollTop();  //滚动条距顶部的高度 clientHeight= ...

  8. js判断元素是否是disable状态

    js判断元素是否是disable状态 jquery判断元素状态用$(select).prop(属性值) == true js判断button是否可以点击: //判断button是否为不可点击状态 if ...

  9. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

随机推荐

  1. ss命令详解

    ss是Socket Statistics的缩写.顾名思义,ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息 ...

  2. pthread_cond_wait虚假唤醒

    pthread_cond_wait中的while()不仅仅在等待条件变量前检查条件cond_is_false是否成立,实际上在等待条件变量后也检查条件cond_is_false是否成立.在多线程等待的 ...

  3. 安卓加载网络图片OOM问题解决

    前言:次片是上篇后续出现的问题,在网上找了很多博客,越解决越乱,好在最后看了郭霖的博客给了我一点思路 借鉴:http://blog.csdn.net/guolin_blog/article/detai ...

  4. Q语言-[帝王三国送将辅助]

    纯属自己写的, 玩同一个游戏的朋友,需要送将的, 把需要送的将改名为送, 然后启动辅助即可 本辅助只支持1024x576 191dpi 附上源码 //本源码初始化分辨率1024x576[夏天] Dim ...

  5. Java利用TCP编程实现简单聊天室

    前言: 本文是我在学习尚学堂JAVA300集第二季网络编程部分仿照视频内容实现而成 具体可以去尚学堂官网观看视频学习 一.实现思路 实现聊天室的最核心部分就是JAVA的TCP网络编程. TCP 传输控 ...

  6. server.Transfer不工作

    https://www.codeproject.com/Questions/56736/How-to-use-Server-Transfer-from-Ajax-UpdatePanel For Ser ...

  7. 【我的前端自学之路】【HTML5】Web Socket

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...

  8. adb常用命令（转）

    1.Android Debug Bridge -adb常用命令 1.1简介 Android Debug Bridge,我们一般简称为adb,主要存放在sdk安装目录下的platform-tools文件 ...

  9. Pandas 基础(13) - Crosstab 交叉列表取值

    这小节的题目看起来还挺晦涩的, crosstab 是 pandas 的一个函数, 作用还蛮强大的, 一起来看一下吧~~~ 首先还是先引入一个例子文件: import pandas as pd df = ...

  10. 忽略 iconv 转码错误导致输出中断

    在遇到一些特殊字符时候,使用iconv转码会提示报错,导致整段文字输出为空,解决的方法是增加TRANSLIT//IGNORE $str = iconv("UTF-8", " ...