实现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;
