JS implementation of the partial HTML fixed page with the screen scrolling effect _javascript skills

This article describes the JS implementation of some HTML fixed page at the top of the screen scrolling effect. Share to everyone for your reference, specific as follows:

We often see this special effect on Taobao, the list of goods is very long, and the product column name always stay at the top. If you scroll to the top of the scroll bar, it will automatically determine whether it is to the top, and then always set up to not be afraid of occlusion.

This special effect is through JavaScript and CSS implementation, in the actual development of a lot of uses, the following is a use of JavaScript I found a fake Taobao intelligent floating source code, compatibility is good, in IE, Firefox, chrome under the normal work.

Use this special effect code to note that if used in the sidebar, you need to note that the sidebar can not use JavaScript dynamic loading, must be in a static format, otherwise the JavaScript will be wrong to calculate the height of the page, scroll up and down when the dislocation phenomenon.

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" >
    //With scrolling moving part code
  </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 help you with JavaScript programming.