jQuery實現(xiàn)根據(jù)滾動條位置加載相應內容功能

更新時間：2016年07月18日 14:29:52 作者：macanfa

這篇文章主要實現(xiàn)了jQuery根據(jù)滾動條位置加載相應內容的操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下

實現(xiàn)jQuery根據(jù)滾動條位置加載相應的內容：向下滾動時當內容區(qū)域滾動到可視窗口高度的一半時，加載動畫內容；向上滾動到相應的內容區(qū)域時也重新加載動畫內容！

1.實現(xiàn)思路：

先靜態(tài)布局好HTML結構，使用偽類：hover模擬動畫效果，再使用jQuery 控制動畫類名的切換來實現(xiàn)效果！主要判斷滾動的方向，以及相應方向上加載動畫的時機（即何時才加載動畫的判斷條件！關鍵點?。?/p>

2.思維草稿圖：

向下滾動加載動畫判斷條件：（代碼中addClass()函數(shù)）

向上滾動加載動畫判斷條件：（代碼中addClass2()函數(shù)）

3.代碼實現(xiàn)：

HTML：

<div class="header">
 實現(xiàn)思路：先布局好靜態(tài)布局，再使用hover模擬動畫行為，再改為類名on等用js進行控制！
 </div>
 <div class="banner">
 <h1>前端開發(fā)</h1>
 <p>
 Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進程中，
 網(wǎng)頁制作是Web1.0時代的產(chǎn)物，那時網(wǎng)站的主要內容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以
 瀏覽為主。
 </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;
 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 函數(shù)封裝*/
 //向下滾動時
 function addClass(ele){
 var winH=$(window).height()*0.5;//可視窗口的高度的一半，更改0.5可以調整滾動到底部、中部、頂部時候開始加載
 var top=$(window).scrollTop();//可視窗口的滾動高度
 var ele_t=$(ele).offset().top;//內容區(qū)的top
 var ele_h=$(ele).height();//內容區(qū)的高

 //判斷條件，看草稿圖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;//內容區(qū)的top
 var ele_h=$(ele).height();//內容區(qū)的高

 //判斷條件
 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){
 //加載對應的內容區(qū)域
 addClass('.banner');
 addClass('.con');
 }else{
 addClass2('.banner');
 addClass2('.con');
 }
 //每次都將后一次的滾動高度賦值給前一次的滾動高度
 firstTop=lastTop;
 });
});

4.總結：

這種效果用于模擬滾動加載動畫內容，重難點在于判斷滾動的方向、相應滾動方向上加載動畫時候的判斷條件，感覺邏輯還是有待提升的！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: