jQuery 判断某个元素是否在可见区域内

教程分享 > WEB技术 > 博文分享 (2543) 2024-04-19 09:54:30

jQuery 判断某个元素是否在可见区域内

这个功能是经常在用的, 但自己没有注意过总结, 下面就总结在这里. 希望对自己和有需要的朋友有帮助!

我采用一个题目的形式, 帮助自己记忆.

题目:  假定某个元素, $("#item"), 实现元素在可见区域时打印'出现了', 该元素在不可见区域时打印'消失了'.

需要的知识点(以下知识点纯属大白话),

 

当拖动滚动条时, 这个元素随着页面滚动, 该元素距离页面顶部的距离:  
 

var itemOffsetTop = $("#item").offset().top;

$("#item")元素的高度:

var itemOuterHeight = $("#item").outerHeight(); //这个方法可以传递一个参数true, 如果传递表示需要求出的高度含有外边距, 否则不含有. 具体视需求而定.

页面滚动的距离:

var winScrollHeight = $(window).scrollTop();

浏览器可见区域的高度:

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

知道了以上的知识点, 我们来分析一下, 如何确定该元素在可见区域内呢?

/*  思考:
    在窗口上下滚动的情况下, 一个页面元素的状态有下面3种
    ① 向上滚动超出可见区域
    ② 向下滚动超出可视区域
    ③ 在可视区域内
*/
// 情况1 -> 由于元素随页面向上滚动, 整个页面滚动的距离大于元素顶部偏移量 + 元素本身的高度 -> 超出
// 情况2 -> 由于元素随页面向下滚动, 整个页面滚动的距离小于元素顶部偏移量 - 浏览器可见区域高度 -> 超出


具体实现:

var $win = $(window);
var itemOffsetTop = $("#item").offset().top;
var itemOuterHeight = $("#item").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        console.log('出现了');
    } else {
        console.log('消失了');
    }
})

相关文章
jQuery 判断某个元素是否在可见区域内这个功能是经常在用的, 但自己没有注意过总结, 下面就总结在这里. 希望对自己和有需要的朋友有帮助!我采用一个题目的形式, 帮助自己记忆.题目:  假定...
jQuery select 获取值$title(方法一:) let val=$('#selectId').val(); //获取选中值 $title(方法二:) let val=$('#se...
jQuery checkbox获取选中状态let check=$(this).is(':checked') console.log(check); // true /false注意通过form...
Jquery 对form表单对象直接使用reset()方法是无法生效得,而且可能报错没有reset()这个方法
问题描述JQuery_ajax formData 上传文件报错:Uncaught TypeError: Illegal invocationJquery 版本2.1.4$.ajax({ t...
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
​1.假设初始化的chosen如下$('#chosenId').chosen({ width: '98%',//其他参数参考官网设置 }); 2....
jQuery 取选中的radio的值方法,jQuery,radio
jQuery之MD5加密插件使用及下载,网络中md5进行简单加密的地方越来越多。这里讲解一个jQuery的md5插件
jQuery添加/改变/移除CSS类及判断是否已经存在CSS,jquery,css
jquery方式input radio根据值选中元素$(currentForm).find('input:radio[name=specifyColorTag][value="0"]').pro...
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
依赖说明tabler icons 3.11.0 (基于webfont模式实现)fontIconPicker 3.1.1jquery 3.6.0 实现效果打开选择