jQuery根據滾動條位置載入相應的內容

馬燦發發表於2016-06-28

1.目標:

實現jQuery根據滾動條位置載入相應的內容:向下滾動時當內容區域滾動到可視視窗高度的一半時,載入動畫內容;向上滾動到相應的內容區域時也重新載入動畫內容!

2.實現思路:

先靜態佈局好HTML結構,使用偽類:hover模擬動畫效果,再使用jQuery 控制動畫類名的切換來實現效果!主要判斷滾動的方向,以及相應方向上載入動畫的時機(即何時才載入動畫的判斷條件關鍵點!)。

3.思維草稿圖:

向下滾動載入動畫判斷條件:(程式碼中addClass()函式)

向下滾動載入動畫判斷條件

向上滾動載入動畫判斷條件:(程式碼中addClass2()函式)

這裡寫圖片描述

4.程式碼實現:

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;
  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;
  });
});

5.總結:

這種效果用於模擬滾動載入動畫內容,重難點在於判斷滾動的方向相應滾動方向上載入動畫時候的判斷條件,感覺邏輯還是有待提升的!q(≧▽≦q)

相關文章