实现思路：
先静态布局好html结构，使用伪类：hover模拟动画效果，再使用jquery 控制动画类名的切换来实现效果！主要判断滚动的方向，以及相应方向上加载动画的时机（即何时才加载动画的判断条件！关键点！）。
代码实现：
html：
<p class="header">
实现思路：先布局好静态布局，再使用hover模拟动画行为，再改为类名on等用js进行控制！
</p>
<p class="banner">
<h1>前端开发</h1>
<p>
web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，
网页制作是web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以
浏览为主。
</p>
</p>
<p class="con">
<p class="con_l"><img src="images/1.jpg" alt="" /></p>
<p class="con_2"><img src="images/2.jpg" alt="" /></p>
</p>
<p class="news">news</p>
<p class="footer">footer</p>
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;
});
});
总结：
这种效果用于模拟滚动加载动画内容，重难点在于判断滚动的方向、相应滚动方向上加载动画时候的判断条件，感觉逻辑还是有待提升的！
以上就是如何根据jquery滚动条位置加载内容的思路和实现代码详解的详细内容。