jQuery实现根据滚动条位置加载相应内容功能

时间:2021-05-26

实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容!

1.实现思路:

先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!)。

2.思维草稿图:

向下滚动加载动画判断条件:(代码中addClass()函数)

向上滚动加载动画判断条件:(代码中addClass2()函数)

3.代码实现:

HTML:

<div class="header"> 实现思路:先布局好静态布局,再使用hover模拟动画行为,再改为类名on等用js进行控制! </div> <div class="banner"> <h1>前端开发</h1> <p> Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中, 网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以 浏览为主。 </p> </div> <div class="con"> <div class="con_l"><img src="images/1.jpg" alt="" /></div> <div class="con_2"><img src="images/2.jpg" alt="" /></div> </div> <div class="news">news</div> <div class="footer">footer</div>

CSS:

*{margin:0px;padding:0px;}//粗暴地清除默认边距body{ font-family:"Arial Microsoft Yahei"; font-size:16px; font-weight:bold;}.header{ width:100%;height:500px; background-color: #10E668;}.banner{ width:100%;height:600px; background:#F7CF3B; text-align: center; margin:30px auto; overflow: hidden;}.banner h1{ font-size:30px; padding:50px 0; position:relative; top:400px; transition:all 0.3s 0.3s linear;}.banner p{ font-size:18px; width:80%; margin:30px auto; line-height: 1.8em; text-align: left; text-indent:2em; position:relative; top:400px; transition:all 0.5s 0.5s linear;}//动画类.banner.on h1,.banner.on p{ top:0px;}.con{ width:80%;height:720px; background:#508E5A; margin:20px auto; overflow: hidden;}.con img{ width:400px;height:auto;}.con_l{ float: left; position:relative; left:-400px; transition:all 0.3s 0.3s linear;}.con_2{ float: right; position:relative; right:-400px; transition:all 0.3s 0.3s linear;}//动画类.con.on .con_l{ left:0;}.con.on .con_2{ right:0;}.news{ width:100%;height:600px; background:#CA3400;}.footer{ width:100%;height:600px; background-color: #ccc;}

jQuery:

$(function(){ //向下滚动时 function addClass(ele){ var winH=$(window).height()*0.5;//可视窗口的高度的一半,更改0.5可以调整滚动到底部、中部、顶部时候开始加载 var top=$(window).scrollTop();//可视窗口的滚动高度 var ele_t=$(ele).offset().top;//内容区的top var ele_h=$(ele).height();//内容区的高 //判断条件,看草稿图1! if(top<ele_t-winH){ $(ele).removeClass('on'); }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //向上滚动时,看草稿图2! function addClass2(ele){ var winH=$(window).height()*0.5;//更改0.5可以调整滚动到底部、中部、顶部时候开始加载 var top=$(window).scrollTop();//可视窗口的滚动高度 var ele_t=$(ele).offset().top;//内容区的top var ele_h=$(ele).height();//内容区的高 //判断条件 if(top>ele_t+ele_h){ $(ele).removeClass('on'); }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //获取前一次的滚动高度(这里是第一次) var firstTop=$(window).scrollTop(); $(window).scroll(function(){ //每次滚动重新获取滚动高度 var lastTop=$(this).scrollTop(); //后一次滚动高度大于前一次滚动高,说明向下滚动,否则想上滚动! if(lastTop>firstTop){ //加载对应的内容区域 addClass('.banner'); addClass('.con'); }else{ addClass2('.banner'); addClass2('.con'); } //每次都将后一次的滚动高度赋值给前一次的滚动高度 firstTop=lastTop; });});

4.总结:

这种效果用于模拟滚动加载动画内容,重难点在于判断滚动的方向、相应滚动方向上加载动画时候的判断条件,感觉逻辑还是有待提升的!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章