欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現部分HTML固定頁面頂部隨屏滾動效果

 更新時間:2015年12月24日 14:45:16   作者:cui_angel  
這篇文章主要介紹了JS實現部分HTML固定頁面頂部隨屏滾動效果,涉及JavaScript響應onscroll事件動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下

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

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

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

使用這個特效代碼需要注意,如果在側邊欄使用,則需要注意,側欄中的欄目不能使用JavaScript動態(tài)加載,必須用靜態(tài)的格式,否則在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的replace方法

    JS的replace方法

    在javascript中,String的函數replace()簡直太讓人喜愛了。它靈活而強大的字符替換處理能力,這里簡單介紹下,方便需要的朋友
    2013-12-12
  • JS實現的Object數組去重功能示例【數組成員為Object對象】

    JS實現的Object數組去重功能示例【數組成員為Object對象】

    這篇文章主要介紹了JS實現的Object數組去重功能,可實現針對數組成員為Object對象的去重復功能,涉及javascript數組元素遍歷、屬性判斷等相關操作技巧,需要的朋友可以參考下
    2019-02-02
  • javascript如何使用函數random來實現課堂隨機點名方法詳解

    javascript如何使用函數random來實現課堂隨機點名方法詳解

    這篇文章主要介紹了javascript如何使用函數random來實現課堂隨機點名方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • bootstrap datepicker限定可選時間范圍實現方法

    bootstrap datepicker限定可選時間范圍實現方法

    這篇文章主要介紹了bootstrap datepicker限定可選時間范圍的實現方法,本文涉及到相關知識點,通過實例給大家介紹的非常詳細,需要的朋友可以參考下
    2016-09-09
  • Javascript的IE和Firefox兼容性匯編

    Javascript的IE和Firefox兼容性匯編

    Javascript的IE和Firefox兼容性匯編...
    2006-07-07
  • javascript每日必學之繼承

    javascript每日必學之繼承

    javascript每日必學之繼承,介紹了有關繼承的相關內容,感興趣的小伙伴們可以參考一下
    2016-02-02
  • JavaScript實現繼承的6種常用方式總結

    JavaScript實現繼承的6種常用方式總結

    JavaScript想實現繼承的目的:重復利用另外一個對象的屬性和方法。本文為大家總結了JavaScript實現繼承的6種常用方式,需要的可以參考一下
    2022-07-07
  • 微信小程序實現簡單input正則表達式驗證功能示例

    微信小程序實現簡單input正則表達式驗證功能示例

    這篇文章主要介紹了微信小程序實現簡單input正則表達式驗證功能,結合實例形式分析了微信小程序input組件事件綁定及正則驗證相關操作技巧,需要的朋友可以參考下
    2017-11-11
  • JavaScript聲明函數的5種方法小結

    JavaScript聲明函數的5種方法小結

    本文主要介紹了JavaScript聲明函數的5種方法小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-02-02
  • js實現圖片淡入淡出效果

    js實現圖片淡入淡出效果

    這篇文章主要為大家詳細介紹了js實現圖片淡入淡出效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09

最新評論