jQuery根据滚动条位置加载相应的内容

1.目标：

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

2.实现思路：

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

3.思维草稿图：

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

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

4.代码实现：

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(){
  /*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;
  });
});

5.总结：

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