实现jQuery根据滚动条位置加载相应的内容：向下滚动时当内容区域滚动到可视窗口高度的一半时，加载动画内容；向上滚动到相应的内容区域时也重新加载动画内容！
1.实现思路：
先静态布局好HTML结构，使用伪类：hover模拟动画效果，再使用jQuery 控制动画类名的切换来实现效果！主要判断滚动的方向，以及相应方向上加载动画的时机（即何时才加载动画的判断条件！关键点！）。
2.思维草稿图：
向下滚动加载动画判断条件：（代码中addClass()函数）
向上滚动加载动画判断条件：（代码中addClass2()函数）
3.代码实现：
HTML：
<div> 实现思路：先布局好静态布局，再使用hover模拟动画行为，再改为类名on等用js进行控制！ </div> <div> <h1>前端开发</h1> <p> Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中， 网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以 浏览为主。 </p> </div> <div> <div><img src="https://www.jb51.net/images/1.jpg" alt="" /></div> <div><img src="https://www.jb51.net/images/2.jpg" alt="" /></div> </div> <div>news</div> <div>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(){ /*version 0.1.0 函数封装*/ //向下滚动时 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.总结：
这种效果用于模拟滚动加载动画内容，重难点在于判断滚动的方向、相应滚动方向上加载动画时候的判断条件，感觉逻辑还是有待提升的！