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

时间:2021-08-08 08:30:30
$("#app").offset().top;

offset().top表示 绝对偏移值,比如说有一个很长的页面,#app这个元素 在最底下,  $("#app").offset().top就表示 #app这个元素距离页面顶端的距离,它一般是固定的,不随窗口滚动而改变。

$(window).scrollTop();

窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离

$(window).height():

浏览器可视窗口的高度

完整js代码如下:

<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var a = $("#app").offset().top;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {
alert("div在可视范围");
}
});
});
</script>

使用jQuery判断元素是否在可视区域的更多相关文章

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

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

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

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

  3. jq、js判断元素是否在可视区域内

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...

  4. Vue-懒加载&lpar;判断元素是否在可视区域内&rpar;

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

  5. JQuery判断元素是否存在

    JQuery判断元素是否存在的原理与javascript略有不同,因为$选择器选择的元素无论是否存在都不会返回null或undefined,要使用JQuery判断元素是否存在,只能使用length属性 ...

  6. jQuery判断元素是否存在方法

    1.使用javascript判断元素是否存在 if(document.getElementById('div')) { } else { } 2.使用jquery判断元素是否存在 if ($(&quo ...

  7. jQuery判断元素是否在可视区

    假设此元素为 #item,先说几个关键的属性: $('#item').offset().top#item 的绝对偏移量,指#item的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这 ...

  8. jquery判断元素是否隐藏的多种方法

    第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被 ...

  9. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

随机推荐

  1. 50 Android Hacks阅读笔记

    Hack 1.善用weightSum和layout_weight. 问题提出:尝试做一个button的宽度是父View的一半的效果. 关键词:weightSum = 1 , layout_weight ...

  2. VUE踩坑之路

    一.常见报错 1.vue-cli-service 不是内部或外部命令,也不是可运行程序 解决方案: 用以下命令安装Vue CLI就好 npm install -g @vue/cli # OR yarn ...

  3. Java IO(四)——字符流

    一.字符流 字节流提供了处理任何类型输入/输出操作的功能(因为对于计算机而言,一切都是0和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,因为一个Unicode字符占用2 ...

  4. 【学习总结】Git学习-参考廖雪峰老师教程六-分支管理

    学习总结之Git学习-总 目录: 一.Git简介 二.安装Git 三.创建版本库 四.时光机穿梭 五.远程仓库 六.分支管理 七.标签管理 八.使用GitHub 九.使用码云 十.自定义Git 期末总 ...

  5. mac 10&period;12显示隐藏文件

    macOS Sierra 10.12版本 显示隐藏文件   1.显示隐藏文件 打开Terminal 输入:defaults write com.apple.finder AppleShowAllFil ...

  6. last命令详解

    基础命令学习目录首页 原文链接:https://blog.csdn.net/jerry_1126/article/details/54427119 [root@xiaoma /root] test!# ...

  7. 问题分析 - 电容的ESR

    ESR,是Equivalent Series Resistance三个单词的缩写,翻译过来就是“等效串连电阻” 理论上,一个完美的电容,自身不会产生任何能量损失,但是实际上,因为制造电容的材料有电阻, ...

  8. base64的作用

    本函数将字符串以 MIME BASE64 编码.此编码方式可以让中文字或者图片也能在网络上顺利传输.在 BASE64 编码后的字符串只包含英文字母大小写.阿拉伯数字.加号与反斜线,共 64 个基本字符 ...

  9. &lbrack;WDT&rsqb;内部看门狗和外部看门狗

    1. 芯片内部看门狗 内部看门狗通常为芯片内部某个特殊定时器,用户可以通过手动初始化.设置timeout.使能.失能该看门狗,然后在线程中定时去喂狗,从而达到检测应用程序跑飞.跑死的情况. 在Linu ...

  10. &lbrack;转&rsqb; crontab命令

    [From] http://man.linuxde.net/crontab   当前位置:首页 » 系统管理 » crontab crontab命令 crontab命令被用来提交和管理用户的需要周期性 ...