窗口滚动时,判断元素与视野的关系-js代码

思路解析:

通过判断以下三者与0的关系,来判断元素与视野的关系:

元素顶部距离窗口顶部的距离:t = elem.offset().top - $(window).scrollTop();

元素底部距离窗口底部的距离:b = h - ( t + elem.height() );

窗口的高度:h = $(window).height();

可以列出以下情况:

根据这些情况就可以判断元素与视野的关系。

源码如下:

// 判断元素和视野的关系
function setCheckInview(elem, onchange){
    checkInview(elem);
    $(window).on(‘scroll‘, function(e){
        checkInview(elem);
    });
    var topTemp = null;
    function checkInview(elem){
        var t = elem.offset().top - $(window).scrollTop();
        var h = $(window).height();
        var b = h - ( t + elem.height() );
        var inview = 0; // 是否在视野中,0全部在视野中,1部分在视野中,2消失在视野中
        var posi = 0; // 偏向视野的上中下哪个部位,0上,1中,2下
        var intro = ‘‘; // 文字介绍
        var dicrect = 0; // 元素移动的方向,0上,1下,2未知
        if(t>0 && t>h && b<0){
            intro = ‘消失-在视野之下‘;
            inview = 2;
            posi = 2;
        }
        if(t>0 && t<h && b<0){
            intro = ‘部分-冒头(在视野下部分)‘;
            inview = 1;
            posi = 2;
        }
        if(t>0 && t<h && b>0 && b<h){
            intro = ‘全部-在视野内‘;
            inview = 0;
            posi = t<b ? 0 : t==b ? 1 : 2;
        }
        if(t<0 && b>0 && b<h){
            intro = ‘部分-露脚(在视野上部分)‘;
            inview = 1;
            posi = 0;
        }
        if(t<0 && b>0 && b>h){
            intro = ‘消失-在视野之上‘;
            inview = 2;
            posi = 0;
        }
        if(t==0 && b>=0){
            intro = ‘全部-在视野内-上贴边‘;
            inview = 0;
            posi = 0;
        }
        if(t==0 && b<0){
            intro = ‘部分-上贴边,冒头(在视野下部分)‘;
            inview = 1;
            posi = 2;
        }
        if(t>=0 && b==0){
            intro = ‘全部-在视野内-下贴边‘;
            inview = 0;
            posi = t==b ? 1 : 2;
        }
        if(t<0 && b==0){
            intro = ‘部分-下贴边,露脚(在视野上部分)‘;
            inview = 1;
            posi = 0;
        }
        if(t<0 && b<0){
            intro = ‘部分-没有头,没有脚(在视野下部分)‘;
            inview = 1;
            posi = t<b ? 0 : t==b ? 1 : 2;
        }
        // 元素移动方向
        if(topTemp===null){
            dicrect = 2;
        }else if(t > topTemp){
            intro += ‘【↓】‘;
            dicrect = 1;
        }else if(t < topTemp){
            intro += ‘【↑】‘;
            dicrect = 0;
        }
        topTemp = t;
        // 返回
        var data = {
            t: t,
            b: b,
            h: h,
            inview: inview,
            posi: posi,
            dicrect: dicrect,
            intro: intro
        }
        if(typeof onchange == ‘function‘){
            onchange.apply(this, [data]);
        }
    }
}

调用方法:

setCheckInview(elem, onchange)

elem [Query Dom] 要判断关系的元素

onchange [function] 关系变化时的回调函数,参数是[Object]格式,字段如下:

t: 元素顶部距离窗口顶部的距离
   b: 元素底部距离窗口底部的距离
   h: 窗口的高度
   inview: 是否在视野中,0全部在视野中,1部分在视野中,2消失在视野中
   posi:偏向视野的上中下哪个部位,0上,1中,2下
   dicrect:元素移动的方向,0上,1下,2未知
   intro: 文字介绍

调用示例:

    var hasCountUp = false; // 是否已经进入过视野
    setCheckInview($(‘#countup-wrap‘), function(v){
        if(!hasCountUp){
            if(v.inview == 0 || v.inview == 1){ // 全部或部分进入视野
                console.log(‘第一次进入视野时‘);
                this.hasCountUp = true;
            }
        }
    });

原文地址:https://www.cnblogs.com/mankii/p/11631225.html

时间: 2024-10-07 04:50:05

窗口滚动时,判断元素与视野的关系-js代码的相关文章

使页面滚动到指定元素+优化+API介绍(JS动画)

前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 1  使用的API简介 document.querySelectorAll preventDefault currentTarget getAttribute document.querySelector offsetTop window.scrollTo 2  初版 代码及思路如下: //1 点击导航跳到指定位置第一步,获取

窗口滚动到当前元素才显示动画效果

1 $(function(){ 2 $(window).scroll(function(){ 3 var curr_element = $('当前元素class或id名') 4 var active_class = '显示动画效果的class或id' 5 var scroll_h = $(window).scrollTop()+$(window).height(); 6 var self_top = curr_element.offset().top; 7 var self_h = curr_e

JS函数库:页面滚动过程中元素产生动画效果 WOW.js

官网 WOW.js依赖animate.css, 所以它支持animate.css多达60多种动画效果. 浏览器兼容:IE9以及以前的版本不适用 使用方法: 1.引入文件 <link rel="stylesheet" href="css/animate.min.css" /> <script type="text/javascript" src="js/wow.min.js"></script>

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

第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test">< p>仅仅是测试所用</p>< /div> 那么,我们可以用以下语句来判断id

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

滚动时div的背景图片随之滚动

在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-position来实现的,实现原理为当目标DIV出现在屏幕上时,当往下滚动时background-position的Y越来越小,反之则越大. 准备好一张大图,先写出布局 <style> .wrap{width: 100%;height: 3000px;} .wrap_bg{background: url

javascript判断元素存在和判断元素存在于实时的dom中的方法

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: 1 if ($('#a')) { 2 // some code ... 3 $('#b').doSomething;

jQuery页面滚动图片等元素动态加载实现

一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量多,而且比较大,少说百来K,多则上兆.要是页面载入就一次性加载完毕.乖乖,估计黄花都变成黄花菜了.所以,我们得做点什么,避 免这种糟糕的状况发生.目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗 口范围,则触发图片的加载显示.

JS 侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态

近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果.起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章):而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果. 废话不多说了,直接上码吧,,,,,,,,,,,