正文

原生js和jquery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsettop滚动监听的妙用）

Mr.聂  2022-02-10  562

关键词：

　　想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，

想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者更好的建议，请大家评论，一同探讨，

好了废话不多说，下面开始干活了！

　　首先，说一下我想实现的基本功能：

　　　　此方法需要有2个基本形参，，一个是我要监测的标签a，另一个是我要监测标签相对于哪个标签b做的距离检测。

　　当a和b的距离达到一定范围的时候，让网页局部发生一些变化效果，这是我们的预期。

　　以下是我的方法的框架：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                margin-top: 20px;
            }
            #a1{
                background-color: red;
            }
            #a2{
                background-color: blue;
            }
            #a2 .a22{
                width: 50px;
                height: 50px;
                background-color: navajowhite;
                position: relative;
                top: 50px;
                left: -50px;
            }
            #a3{
                background-color: yellow;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
          <div id="a1"></div>
          <div id="a2">
              <div class="a22">haha</div>
          </div>
          <div id="a3"></div>
          <div id="a3"></div>
    </body>
    <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>
    <script language="JavaScript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        /*以下是我们以监测目标元素距离body顶部距离的方法*/
        function myScrollFn($myElement1,$myElement2){
            $(window).scroll(function(){         //这是scroll方法，窗口滚动时就会被调用
                var a=$myElement1.scrollTop();   //这是监测滚动条距离顶端的距离
                var b=$myElement2.offset().top;   //这是监测我们目标元素距离body或者其第一个定位父元素顶端的距离
                /*当div #a2距离窗口顶部距离在0px到200像素时，div .a22出现*/
                if (b-a<=0&&b-a>=-200) {
                    $(".a22").css({"left":"20px","transition":"all 1s"});
                }else{
                    $(".a22").css({"left":"-50px","transition":"all 0s"});
                }
                console.log(b-a);   //为便于观察，在控制台打印出距离来
            });
        }
        myScrollFn($("body"),$("#a2"));
    </script>
</html>

　　上述代码功能：当窗口上沿在达蓝色div内部时，小div从左侧出现，不在时恢复原状。

　　这里先普及一下基础知识，

　　　　.scrollTop(); 是监测滚动条距离顶端的距离的，这是JQuery方法

　　　 .offset().top   是监测我们目标元素距离body或者其第一个定位父元素顶端的距离这也是JQuery方法及属性

　　　　同样在HTML5中、js中也都有这些属性方法的定义和详解，有兴趣的可以去查看帮助文档。

　　那按照以上结构就可以比较轻松的实现检测距离实现一定动画效果，只需要在if判断书写你想要变化的代码即可，如果想实现

每次到达设定区间都执行动画，可以像例子中一般，在else中设置重置我们的修改的样式即可。

　　写到这的时候，突然想到，我们网页中常用的那些，网页滚动产生的视觉差效果，他是不是也可以用这个来做一个方法呢！

　　下面请看这个简易的demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                position: relative;
                height: 3000px;
                padding-top: 400px;
                background-color: gainsboro;
            }
            .a1{
                width: 300px;
                height: 300px;
                background-image: url(img/FqYgq95pkXU2iGax9iYPaxRnt1Xl.png);
                background-size: 100%;
                position: absolute;
            }
            .a2{
                width: 200px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                margin-left: 50px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
          <div class="container">
              <div class="a1"></div>
              <div class="a2"></div>
          </div>
    </body>
    <script language="JavaScript" src="js/jquery-1.10.2.min.js"></script>
    <script language="JavaScript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        /*编写一个简单的方法,实现网页常见常见的视觉差效果*/
        function myEye($myElement1,$myElement2){
            var num=1;
            $(window).scroll(function(){
                var a=$("body").scrollTop();       //取出滚动条离窗口顶端的距离
                var yellow=$myElement2.offset().top;  //取出黄色div块离body最上方的距离
                var c=yellow-a+0.5;                //计算出比滚动条滚动速度慢一倍的数值
                $myElement1.css({"top":+c+"px"});     //设置黄色div的慢一倍的移动速度，产生视觉差效果
            })
        }
        myEye($(".a1"),$(".a2"));
    </script>
</html>

　　两个参数，可以设置成需要产生视觉差的2个元素节点，当然这里做的是demo，多加一些形参也都是可以的，看具体的网页需求了。

注意这里做实参的元素节点都是通过绝对定位实现的。通过 c=yellow-a+0.5;$myElement1.css({"top":+c+"px"}); 这两句代码

可以实现2个块滚动速度差一倍，如果要改变相差的速度，只需要修改 c=yellow-a+0.5;这个式子就可以了，这个浏览器滚动条的精度，

我们暂且以1px来算（这个不同设备好像是不同的，博主不是很了解），但是以1像素来计算，通过加减0-1之间的数值，可以实现任意

速度比的视觉差，按照这个结构，修改起来还是很容易的。

　　以上内容纯属博主无聊，一个人乱搞的产物，如果有bug，希望导游们能够指出，我们共同探讨。个人感觉还是蛮实用的，比直接应

用插件灵活性高，代码量也少很多。

认识jquery，jquery的优势语法多库冲突js原生对象和jquery对象之间相互转换和dom操作，常用的方法

...JQuery　　　　　 JQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一套定义好的方法　　　　 JQuery的主旨：以更少的代码，实现更多的功能（二）JQuery的优势　　　　1）可以像CSS一样访问和操作DOM　　... 查看详情

深入delphi编程理解之消息windows原生窗口编写及消息处理过程(代码片段)

　通过以sdk方式编制windows窗口程序，对理解windows消息驱动机制和delphi消息编程有很大的帮助。sdk编制windows窗口程序的步骤：1、对TWndClass对象进行赋值;2、向系统注册wndclass对象(RegisterClass)；3、CreateWindow创建窗口，获得窗口句柄... 查看详情

jquery

1、原生js和jQuery入口函数的加载模式不同　　1）原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行；　　2）jQuery会等到DOM元素加载完毕，但不会等到图片加载完成就会执行。　　//写在head标签里 ... 查看详情

jQuery 函数在窗口调整大小时触发但不是在页面加载时触发

】jQuery函数在窗口调整大小时触发但不是在页面加载时触发【英文标题】：jQueryfunctiontriggeredonwindowresizebutnotonpageload【发布时间】：2012-08-1304:23:08【问题描述】：我发现这个jQuery代码允许在水平和垂直方向上都没有固定尺寸的div... 查看详情

iframe获取父子窗口的元素和方法

jQuery、js调用iframe父窗口与子窗口元素的方法（亲测有效）子页面获取父页面的id=care的子页面parent.care.location.reload();父页面获取id=imp的子页面imp.location.reload();1.jquery在iframe子页面获取父页面元素和方法代码如下:parent.$("selector");pa... 查看详情

jquery自学笔记(代码片段)

文章目录一、原生JavaScript与JQuery对比二、jQuery的概念及基本使用步骤三、jQuery的入口函数四、$的含义五、Dom对象和jQuery对象一、原生JavaScript与JQuery对比原生js的缺点1、不能添加多个入口函数(window.onload)，如果添加了多个... 查看详情

触发jquery代码的Woocommerce函数

】触发jquery代码的Woocommerce函数【英文标题】：Woocommercefunctionthattriggersjquerycode【发布时间】：2021-12-1019:42:50【问题描述】：当将特定类别的产品添加到woocommerce购物车时，我试图通过使用简单的JS函数模拟按钮单击来触发弹出窗... 查看详情

js中的原生ajax和jquery中的ajax(代码片段)

AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。js中的Ajax：参数介绍：open(Stringmethod,Stringurl,booleanasynch); 准备请求: & 查看详情

原生js实现jquery的addclass和removeclass

代码如下：document.getElementById("btn").classList.add("active");document.getElementById("btn").classList.remove("active"); 查看详情

flutterweb和webview原生交互调用

...程，一个是FlutterWeb工程最终打包成Web页面，一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次，可以直接使用社区Flutter原生工程的插件，只需要封装给Web调用。F... 查看详情

javascript自执行函数和jquery扩展方法

　　我们通常将JS代码写在一个单独的JS文件中，然后在页面中引入该文件。但是，有时候引入后会碰到变量名或函数名与其它JS代码通途的问题。那么如何解决这个问题呢？作用域隔离。在JS中，作用域是通过函数来划分的，将J... 查看详情

标签页（tab）切换的原生js,jquery和bootstrap实现

...课程Tab选项卡切换效果时做的总结和练手。原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。本节内容标签页（tab）切换的原生js实现标签页（tab）切换的jquery实现标签页（tab）切换的bootstrap实现标签页（tab）切换... 查看详情

东京商城主页中部商品分类和轮播图代码的编写

...己通过ajax拿到后端数据，自己填写数据包,一般来说就用原生写法简单点，也可以使用jquery和vue.js来渲染，后面的章节我会为大家演示这种前端渲染写法。后端分类数据的写法这一块出来的效果图查看详情

react-native入门，编写静态页面，集成原生项目(代码片段)

...新项目使用rn创建一个项目和把rn技术集成到一个现有的原生项目是有差别的。//创建和运行一个rn项目：react-nativeinitAwesomeProjectcdAwesomePro 查看详情

jquery(代码片段)

为什么要使用jQuery在用js写代码时，会遇到一些问题：window.onload事件有事件覆盖的问题，因此只能写一个事件。代码容错性差。浏览器兼容性问题。书写很繁琐，代码量多。代码很乱，各个页面到处都是。动画效果很难实现。jQu... 查看详情

js原生ajax和jquery的ajax

一、Ajax概述1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他... 查看详情

在包装 jQuery 插件的匿名函数中使用“窗口”、“文档”和“未定义”作为参数

】在包装jQuery插件的匿名函数中使用“窗口”、“文档”和“未定义”作为参数【英文标题】：Using\'window\',\'document\'and\'undefined\'asargumentsinanonymousfunctionthatwrapsajQueryplugin【发布时间】：2013-03-2412:55:55【问题描述】：老实说，我不... 查看详情

原生js和jquery操作dom的区别小结

一.Js原生对象和jQuery实例对象的相互转化:(1).原生JS对象转JQ对象: $(DOM对象);(2).JQ对象转原生JS对象:$(DOM对象).get(index);//注意区分eq(index)是jQuery实例对象;直接下标访问,$(DOM对象)[index]; 二.两者操作DOM的对比一、创建元素节点... 查看详情