JQuery之 逐次加載（Part8）

今天來講一個逐次加載，當滾動到指定位置則加載對應的效果。

說明：

1. offset():offset() 方法设置或返回被选元素相对于文档的偏移坐标。
2. scrollTop():scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
3. scroll():当用户滚动指定的元素时，会发生 scroll 事件。

CSS:

	*{padding:0; margin:0}
.header{ height:400px; width:100%; background:#0C6}
.banner{ height:600px; width:100%; background:#FC3; margin:30px auto; text-align:center; overflow:hidden;}
.banner h1{ font-size:30px;  padding:80px 0; position:relative; top:400px; 
transition:0.5s 0.3s;}
.banner p{ font-size:18px; color:#000;  width:80%; margin:50px auto; line-height:1.8em; position:relative; top:400px; transition:0.5s 0.8s;}
.banner.on h1{ top:0}
.banner.on p{ top:0;}
.news{ width:1000px; height:400px; margin:30px auto; background:#390}
.footer{ width:100%; height:100px; background:#F96}

jq:方法一：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
$(function () {

			function addclass(e) {
				var win_h = $(window).height() * 0.5;
				var t = $(e).offset().top;
				var top = $(window).scrollTop();

				if (top > t - win_h) {
					$(e).addClass("on")
					console.log(top);
					console.log(t - win_h);
				}
			}

			$(window).scroll(function () {
				addclass(".banner")
				addclass(".con")
			})
		})

jq：方法二

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
var win_h=$(window).height()*0.5;
				var banner_t=$(".banner").offset().top;
				
				var con_t=$(".con").offset().top;
				
				
				
				$(window).scroll(function(){
					var top=$(window).scrollTop();
					
					if(top>banner_t-win_h){
						$(".banner").addClass("on")	
					}
					
					if(top>con_t-win_h){
						$(".con").addClass("on")	
					}
						
					
				})

HTML：

<div class="header">
		<h1>简述实践对认识的决定作用。</h1>
		<p>①实践是认识的来源，一切真知都来源于实践。强调实践是认识的唯一源泉，并不否认可以从他人和书本获得知识。
			②实践是认识发展的动力，实践的发展不断提出认识的新课题；实践给解决新课题提供经验资料，提供认识工具和技术手段；推动人们的思维能力的发展。
			③实践是检验认识真理性的唯一标准；
			④实践是认识的目的。
		</p>
	</div>

	<div class="banner">
		<h1>简述矛盾的普遍性和特殊性及其辩证关系。</h1>
		<p>矛盾普遍性
			原 理：矛盾存在于一切事务中,并且贯穿于每一事物发展过程的是中,即事事有矛盾,时时有矛盾,这就是矛盾的普遍性.
			方法论：要承认矛盾的普遍性与客观性,敢于承认矛盾揭露矛盾；还要善于全面分析矛盾,坚持两分法,防止片面性.
			茅盾的特殊性
			原 理：矛盾的特殊性,是指茅盾着的事物及其每一个侧面各有其特点
			表 现：不同事物的矛盾具有不同的特点；同一事物的矛盾在不同发展阶段各有不同特点,事物矛盾的双方也各有特点.
			方法论：所谓具体问题具体分析是指在矛盾普遍性原理的指导下具体分析矛盾的特殊性,并找出解决矛盾的正确方法,具体问题具体分析,反对不切实际的教条经验主义.
			矛盾普遍性与特殊性辩证关系
			原 理：而这时编者工艺的关系；矛盾的普遍性和特殊性相互联结；普遍性属于特殊性之中,并通过特殊性表现出来,没有特殊性就没有普遍性,特殊性也离不开普遍性,矛盾的普遍性和特殊性在不同的场合可以互相转化.
			方法论：掌握矛盾普遍性与特殊性辩证关系的原理,对于我们正确地认识事物,学会科学的工作方法,具有重要意义；掌握从特殊性到普遍性再到特殊性认识的方法；掌握一般号召和个别指导相结合的工作方法.
			总之立足课本. </p>
	</div>

	<div class="news"></div>

	<div class="footer"></div>

滾動前：

滾動后：滾動到屏幕的一半時則加載黃色背景的內容​​​​​​​