JavaScript imitation Taobao intelligent floating

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.

In Z-blog 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 use static format, otherwise in JavaScript will be wrong to calculate the height of the page, scroll up and down when the dislocation phenomenon.

The following are the relevant code:

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

HTML Code

<div id= "box" >

<div id= "float" class= "Div1" >

Part of the code that moves with the scroll

</div>

</div>

CSS Code

#box {float:left;position:relative;width:295px;}

. div1{}

. div2{position:fixed;_position:absolute;top:3px;z-index:295;}

Original Address: Moonlight Blog