原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsetTop滚动监听的妙用）
Posted Mr.聂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsetTop滚动监听的妙用）相关的知识，希望对你有一定的参考价值。
想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，
想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者更好的建议，请大家评论，一同探讨，
好了废话不多说，下面开始干活了！
首先，说一下我想实现的基本功能：
此方法需要有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，希望导游们能够指出，我们共同探讨。个人感觉还是蛮实用的，比直接应
用插件灵活性高，代码量也少很多。
以上是关于原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsetTop滚动监听的妙用）的主要内容，如果未能解决你的问题，请参考以下文章