<!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. C/C++中数据的存储

    学java时了解到不同的数据在系统中存储的位置不一样,有的存在栈里,有的存在堆里.学C/C++时没注意过这个,最近学数据结构时遇到了问题:在定义一个结构体的指针时,系统如何给它分配的空间?从而让我想去 ...

  2. 泛型集合List的详细用法

    命名空间:   System.Collections.Generic List<T>类是 ArrayList 类的泛型等效类.    该类使用大小可 按需动态增加 的数组实现 IList& ...

  3. ajax的三次封装简单概况

    原生ajax:                readyState         准备状态                status             页面状态               ...

  4. Tomcat类加载

    一.为什么会有类加载 1.在类加载阶段,虚拟机需要完成以下3件事情 1)通过一个全限类定名来获取此类的二进制字节流 2) 将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构 3)在内存中生成 ...

  5. day15

    三元表达式 符合python语法的表达方式(形式,公式)称之为表达式 三元:三个元素 总体就是,由三个元素组成表达式其目的是为了简化书写,既然是简化必然有局限性三元表达式只能帮你简化仅有两个分支的if ...

  6. mysql ----BaseDao工具类

    package com.zjw.dao; import java.sql.*; /** * 工具类 */ public class BaseDao { static final String DB_U ...

  7. 20165306 Exp5 MSF基础应用

    Exp5 MSF基础应用 一.实践概述 1. 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.实现: 1.1一个主动攻击实践 ms08-067+window ...

  8. Django 的命令及简单例子

     第一步:下载mysql驱动 cmd进入创建好的django项目目录:然后使用下面的命令创建一个项目testdj.  sudo /usr/lib/python3/dist-packages/djang ...

  9. threejs深入纹理，立体场景cubeResolution（四）

    在这个课程里主要完成讲解两个demo: 一个是电视墙:用视频做纹理 一,用视频做纹理 首先我们用video标签把视频源引入: <video id="video" autopl ...

  10. python 在字典中添加键值对的方法。

    list 添加元素的方法是  list.append(a).将 a 添加到 list 里. dict 添加元素的方法是  dict.update(dict2).意为,将 dict2 的内容添加到 di ...