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

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.总结：

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