JS implements the screen-scrolling effect at the top of some HTML fixed pages_javascript skills

The example in this article describes the JS implementation of the screen-scrolling effect at the top of some HTML fixed pages. Share it with everyone for your reference, the details are as follows:

We often see special effects like this on Taobao. The product list is extremely long, but the product column name always remains at the top. If you scroll the scroll bar to the top, it will automatically determine whether it has reached the top, and then keep it at the top so that it is not blocked.

This special effect is implemented through JavaScript and CSS, and has many uses in actual development. The following is the source code I found using JavaScript to imitate Taobao smart floating. It has good compatibility and can be used in IE, Firefox, It all works fine under Chrome.

You need to pay attention when using this special effect code. If you use it in the sidebar, you need to pay attention. The columns in the sidebar cannot be dynamically loaded using JavaScript and must be in static format. Otherwise, JavaScript will incorrectly calculate the page height and scroll up and down. Dislocation will occur.

JavaScript code:

(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 code:

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

CSS code:

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

I hope this article will be helpful to everyone in JavaScript programming.