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"