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

1.实施思路：

首先静态布局HTML结构，使用伪类：悬停模拟动画效果，然后使用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=' http : images/1 . jpg ' alt=' '//div class=' con _ 2 ' img src=' http : images/2 . jpg ' alt=' '//div/div class=' news ' news/div class=' footer ' footer/div CSS :

* { margin:0pxpadding:0px}//大致清除默认边距体{ font-family : ' arial Microsoft yahei '；font-size :16 px；font-weight : bold；}.标题{ width :100%；高度：500 px；背景色-: # 10E 668；}.横幅{ width :100%；高度：600 px；背景# F7CF3B文本对齐：中心；margin:30px汽车；飞越：隐藏；}.横幅h1 { font-size :30 px；padd :50 px 0；位置：相对；top:400pxtransition:all 0.3s 0.3s线性；}.banner p { font-size :18 px；宽度：80%；margin:30px auto线高： 1.8毫米；文本-左对齐：text-indent :2 em；位置：相对；top:400pxtransition:all 0.5s 0.5s线性；}//动画类。banner.onh1，banner . on p { top :0 px；}.con { width :80%；高度：720 px；背景# 508E5Amargin:20px汽车；飞越：隐藏；}.con img { width:400pxheight:auto}.con_l{左侧浮动：位置：相对；left :-400 px；transition:all 0.3s 0.3s线性；}.con_2{ float:右侧；位置：相对；right :-400 px；transition:all 0.3s 0.3s线性；}//动画类。con.on。con _ l { left:0}.con.on。con _ 2 { right:0}.新闻{ width :100%；高度：600 px；背景# CA3400}.页脚{宽度：100%；高度：600 px；背景色： # CCC；}jQuery:

$(function(){/* 0 . 1 . 0版函数包*///向下滚动时，函数添加类(ele) {var winh=$ (window)。高度()* 0.5；//可视窗口高度的一半，更改0.5调整为开始加载var top=$(窗口)。滚动到底部、中间和顶部时的scroll top()；//可视窗口的滚动高度var ele_t=$(ele)。偏移量()。顶部；//top var ele_h=$(ele)。内容区域中的高度()；//内容区高度//判断条件，见草稿图1！if(topele_t-winH){ $(ele)。remove CLaSS(' on ')；} else if((topele _ t-WinH)(topele _ t ele _ h)){ $(ele)。add CLaSS(' on ')；}else{ $(ele)。remove CLaSS(' on ')；} }//向上滚动时，看草稿图2！函数addclass 2(ele){ var WinH=$(window)。高度()* 0.5；//更改0.5调整为开始加载var top=$(窗口)。滚动到底部、中间和顶部时的scroll top()；//可视窗口的滚动高度var ele_t=$(ele)。偏移量()。顶部；//top var ele_h=$(ele)。内容区域中的高度()；//内容区的高度//判断条件if (topele _ tlee _ h) {$ (ele)。remove class(' on ')；} else if((topele _ t ele _ h)(topele _ t-WinH * 2)){ $(ele)。add CLaSS(' on ')；}else{ $(ele)。remove CLaSS(' on ')；} }//获取上一个滚动高度(这里是第一次)var firsttop=$ (window)。scroll top()；$(窗口)。scroll(函数(){ //检索滚动高度var lastop=$(this)。scroll top()；//上一个滚动高度高于上一个滚动高度，表示向下滚动，否则要向上滚动！if(LastToFirstTop){//加载相应的内容区域addClass('。横幅')；addClass('。con’)；}else{ addClass2('。横幅')；addClass2('。con’)；}//每次将最后一个滚动高度赋给前一个滚动高度firstTop=lastTop});});4.总结：

此效果用于模拟滚动加载动画内容。重点在于判断滚动方向，以及在对应滚动方向加载动画时的判断条件。感觉逻辑还需要改进！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。