首頁 > web前端 > js教程 > JS實作部分HTML固定頁面頂部隨屏滾動效果_javascript技巧

JS實作部分HTML固定頁面頂部隨屏滾動效果_javascript技巧

WBOY
發布: 2016-05-16 15:23:38
原創
1071 人瀏覽過

本文實例講述了JS實作部分HTML固定頁面頂部隨屏滾動效果。分享給大家參考,具體如下:

我們經常在淘寶網看到這樣的特效,商品清單特別長,而商品列名稱始終保持在最頂端。如果你把滾動條滾動至最上邊了,那麼它會自動判斷是否到頂端了,然後一直置頂從而不怕遮擋。

這種特效是透過JavaScript和CSS實現的,在實際開發中有不少用途,以下是我找到的一個使用JavaScript製作的仿淘寶智能浮動的源代碼,兼容性不錯,在IE、Firefox、 Chrome下都能正常工作。

使用這個特效程式碼需要注意,如果在側邊​​欄使用,則需要注意,側欄中的欄目不能使用JavaScript動態加載,必須用靜態的格式,否則在JavaScript會錯誤的計算頁面高度,上下滾動的時候會出現錯位現象。

JavaScript程式碼:

(function(){
  var oDiv=document.getElementById("float");
  var H=0,iE6;
  var Y=oDiv;
  while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
  iE6=window.ActiveXObject&&!window.XMLHttpRequest;
  if(!iE6){
    window.onscroll=function() 
    {
      var s=document.body.scrollTop||document.documentElement.scrollTop;
      if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
      else{oDiv.className="div1";}
    };
  }
})();

登入後複製

HTML程式碼:

<div id="box">
  <div id="float" class="div1">
    //随滚动移动的部分代码
  </div>
</div>

登入後複製

CSS代碼:

#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}

登入後複製

希望本文所述對大家JavaScript程式設計有所幫助。

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板