JS implémente l'effet de défilement d'écran en haut de certaines compétences HTML pages fixes_javascript

L'exemple de cet article décrit l'implémentation JS de l'effet de défilement d'écran en haut de certaines pages HTML fixes. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Nous voyons souvent de tels effets spéciaux sur Taobao. La liste des produits est extrêmement longue, mais le nom de la colonne du produit est toujours en haut. Si vous faites défiler la barre de défilement vers le haut, elle déterminera automatiquement si elle a atteint le haut, puis la maintiendra en haut afin qu'elle ne soit pas bloquée.

Cet effet spécial est implémenté via JavaScript et CSS et a de nombreuses utilisations dans le développement réel. Voici le code source que j'ai trouvé en utilisant JavaScript pour imiter le flottement intelligent Taobao. Il a une bonne compatibilité et peut être utilisé dans IE, Firefox, Tout fonctionne bien sous Chrome.

Vous devez faire attention lorsque vous utilisez ce code d'effet spécial. Si vous l'utilisez dans la barre latérale, vous devez faire attention. Les colonnes de la barre latérale ne peuvent pas être chargées dynamiquement à l'aide de JavaScript et doivent être au format statique. calculera incorrectement la hauteur de la page et fera défiler vers le haut et vers le bas. Une dislocation se produira.

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

Code HTML :

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

Code CSS :

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

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.