JS melaksanakan kesan tatal skrin di bahagian atas beberapa kemahiran HTML tetap pages_javascript

Contoh dalam artikel ini menerangkan pelaksanaan JS bagi kesan tatal skrin di bahagian atas beberapa halaman tetap HTML. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kami sering melihat kesan istimewa sedemikian pada Taobao Senarai produk sangat panjang, tetapi nama lajur produk sentiasa berada di bahagian atas. Jika anda menatal bar skrol ke atas, ia akan secara automatik menentukan sama ada ia telah mencapai bahagian atas, dan kemudian menyimpannya di bahagian atas supaya ia tidak disekat.

Kesan khas ini dilaksanakan melalui JavaScript dan CSS, dan mempunyai banyak kegunaan dalam pembangunan sebenar Berikut ialah kod sumber yang saya temui menggunakan JavaScript untuk meniru terapung pintar Taobao Ia mempunyai keserasian yang baik dan boleh digunakan dalam IE, Firefox. Semuanya berfungsi dengan baik di bawah Chrome.

Anda perlu memberi perhatian apabila menggunakan kod kesan khas ini. Jika anda menggunakannya dalam bar sisi, anda perlu memberi perhatian Lajur dalam bar sisi tidak boleh dimuatkan secara dinamik menggunakan JavaScript dan mesti dalam format statik akan salah mengira ketinggian halaman dan tatal ke atas dan ke bawah akan berlaku.

Kod 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";}
    };
  }
})();

Kod HTML:

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

Kod CSS:

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

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.