JavaScript彈性固定於網頁右側詳解

admin發表於2017-10-24
JavaScript網頁

分享一段程式碼例項，它實現了元素固定於網頁右側的功能。

並且這個固定具有彈性效果，也就是當拖動滾動條的時候，元素以彈性方式復原到原來位置。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  height: 2000px;
}
 
#antzone {
  width: 200px;
  height: 200px;
  background: aquamarine;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
  window.onscroll = function() {
    var odiv = document.getElementById("antzone");
    var scroll = document.documentElement.scrollTop || document.body.scrollTop;
    starmove((document.documentElement.clientHeight - odiv.offsetHeight) + scroll)
  }
  var timer = null;
 
  function starmove(itarget) {
    var odiv = document.getElementById('antzone');
    timer = clearInterval(timer);
    timer = setInterval(function() {
      var speed = (itarget - odiv.offsetTop) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
      if (itarget == odiv.offsetTop) {
        clearInterval(timer);
      } else {
        odiv.style.top = odiv.offsetTop + speed + 'px';
      }
    }, 30);
  }
};
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function() {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.window.onscroll = function() {}，為window物件註冊scroll事件處理函式。

（3）.var odiv = document.getElementById("antzone")，獲取id屬性值為antzone的元素物件。

（4）.var scroll = document.documentElement.scrollTop || document.body.scrollTop，獲取頁面向上滾動的尺寸,這是相容性寫法。

（5）.starmove((document.documentElement.clientHeight - odiv.offsetHeight) + scroll),呼叫starmove()方法可以實現彈性效果，引數是offsetTop目標值，也就是將其固定在頁面低端。

（6）.var timer = null，宣告一個變數並賦值為null，用作定時器函式的標識。

（7）.function starmove(itarget) {}，上面已有介紹。

（8）.var odiv = document.getElementById('antzone')，獲取對應的元素物件。

（9）.timer = clearInterval(timer)，停止上一個定時器函式的執行，防止多次拖動滾動條導致定時器函式重疊執行現象。

（10）.imer = setInterval(function() {},30)，每隔30毫秒執行一次回撥函式。

（11）.var speed = (itarget - odiv.offsetTop) / 6;

  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

  if (itarget == odiv.offsetTop) {

    clearInterval(timer);

  } else {

    odiv.style.top = odiv.offsetTop + speed + 'px';

}，上面考察的是基礎的數學知識了，不多介紹。

二.相關閱讀:

（1）.onscroll事件可以參閱javascript scroll事件一章節。

（2）.scrollTop可以參閱js scrollTop一章節。

（3）.document.documentElement.scrollTop || document.body.scrollTop參閱document.documentElement.scrollTop瀏覽器相容一章節。

（4）.clientHeight可以參閱clientHeight一章節。

（5）.offsetHeight可以參閱js offsetHeight一章節。

（6）.clearInterval()可以參閱clearInterval()一章節。

（7）.setInterval()可以參閱setInterval()一章節。

（8）.offsetTop可以參閱js offsetTop一章節。

（9）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（10）.Math.floor()可以參閱javascript Math.floor()一章節。

相關文章