元素滾動到指定位置以後可以實現固定效果

螞蟻小編發表於2017-03-25

很多網頁都有這樣的效果，比如篇幅較長的網頁，能夠實現側欄的某個某塊固定效果，但是這個模組並不是一開始就是固定的，而是當它移動的指定位置之後才會固定，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  width:900px;
  margin:0px auto;
  line-height:23px;
  padding:10px;
}
#right{
  float:right; 
  width:750px;
  border:solid 1px gray;
  padding:10px;
  height:1000px;
}
#fix{
  border:solid 1px gray; 
  width:90px;
  padding:10px;
  background-color:#eff;
  height:150px;
}
#top{
  width:92px;
  padding:10px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  function htmlPosition(obj){
    var o=obj;
    var t=o.offsetTop;
    var l=o.offsetLeft;
    while(o=o.offsetParent){
      t += o.offsetTop;
      l += o.offsetLeft;
    }
    obj.data_top = t;
    obj.data_left = l;
  }
   
  function htmlScroll(){
    var top=document.body.scrollTop||document.documentElement.scrollTop;
    if(elFix.data_top<top){
      elFix.style.position='fixed';
      elFix.style.top=0;
      elFix.style.left=elFix.data_left;
    }
    else{
      elFix.style.position='static';
    }
  }
   
  var oldHtmlWidth=document.documentElement.offsetWidth;
  window.onresize=function(){
    var newHtmlWidth=document.documentElement.offsetWidth;
    if(oldHtmlWidth == newHtmlWidth){
      return;
    }
    oldHtmlWidth = newHtmlWidth;
    elFix.style.position = 'static';
    htmlPosition(elFix);
    htmlScroll();
  }
  var elFix=document.getElementById('fix');
  htmlPosition(elFix);
  window.onscroll=htmlScroll;
}
</script>
</head>
<body>
<div>
  <div style="float:left;width:120px; ">
    <div id="top"></div>
    <div id="fix"></div>
  </div>
  <div id="right"></div>
</div>
</body>
</html>

上面的程式碼可以實現網頁左側一欄固定效果，下面介紹一下次效果的實現過程。

一.程式碼註釋:

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

2.function htmlPosition(obj){}，此函式可以獲取obj元素距離文件body元素的尺寸，在本程式碼中就是fix元素距離body元素的尺寸。

3.var o=obj，將物件的引用傳遞給變數o。

4.var t=o.offsetTop，獲取物件頂部距離最近的定位父元素的距離，如果父元素沒有定位的元素，那麼就是獲取距離body的距離。

5.var l=o.offsetLeft，和上面同一個道理，只是方位不同罷了。

6.while(o=o.offsetParent){

  t += o.offsetTop;

  l += o.offsetLeft;

}

這個技巧很重要，我們其實要獲取的是元素距離body的距離，但是有時候元素的父級元素中有采用定位的元素，有可能是一個也可能是多個，所以要通過while迴圈不斷的獲取這個尺寸最後累加起來，才是真正的元素到body的距離尺寸。

7.obj.data_top = t，將尺寸值賦值給物件的自定義屬性。

8.obj.data_left = l，和上面是相同的道理。

9.function htmlScroll(){}，此函式為window.onscroll事件處理函式。

10.var top=document.body.scrollTop||document.documentElement.scrollTop，獲取文件向上滾動的尺寸，這裡採用了相容性寫法，具體可以參閱相關閱讀。

11.if(elFix.data_top<top){

  elFix.style.position='fixed';

  elFix.style.top=0;

  elFix.style.left=elFix.data_left;

}

if(elFix.data_top<top)，判斷元素的距離body的距離是否小於top，等於top是個臨界點，也就是元素的頂部正好和客戶區頂部邊緣重合。如果條件滿足就將元素的定位方式設定為fixed，距離頂部的距離為0，同時設定距離左側的距離為elFix.data_left。

12.else{elFix.style.position='static';}，否則將元素的定位方式設定為static。

13.var oldHtmlWidth=document.documentElement.offsetWidth，獲取文件的寬度值。

14.window.onresize=function(){}，為視窗註冊onresize事件處理函式，也就是調整視窗大小的時候觸發此事件。

15.var newHtmlWidth=document.documentElement.offsetWidth，獲取新的文件寬度大小。

16.if(oldHtmlWidth == newHtmlWidth){return;}，如果新舊尺寸相等，那麼就直接跳出此函式。

17.oldHtmlWidth = newHtmlWidth，將新的尺寸賦值給變數oldHtmlWidth。

18.elFix.style.position = 'static'，設定元素的定位方式。

19.htmlPosition(elFix),獲取響應的引數。

20.htmlScroll()，呼叫此函式調整位置。

21.var elFix=document.getElementById('fix')，獲取元素物件。

22.htmlPosition(elFix)，呼叫函式。

23.window.onscroll=htmlScroll，註冊onscroll事件處理函式。

二.相關閱讀:

1.offsetTop屬性可以參閱js offsetTop一章節。 

2.offsetParent屬性可以參閱js offsetParent一章節。 

3.document.body.scrollTop||document.documentElement.scrollTop可以參閱document.documentElement.scrollTop瀏覽器兼容一章節。 

相關文章