Javascript-javascript tips

In fact, this effect is not difficult to achieve. The key point is to pay attention to a. scrollTop computing;
B. Calculate the positioning value of the rolling element;
C. Set the rolling cycle;
The Code is as follows:
Css section:

The Code is as follows:

/* Test height */
Body {height: 3000px ;}
P, ul, li, body {margin: 0; padding: 0 ;}
/* Position: absolute; used for element locating */
# Roll {width: 50px; height: 100px; background: #99CC00; position: absolute ;}

Html code:

The Code is as follows:

JS Code:

The Code is as follows:

Var roll = document. getElementById ('roll '),
InitX = 0,
InitY,
CompY,
Sp = 15,
// The time interval can be adjusted. The step value should not be too large. Otherwise, there will be a flash screen in IE;
TimeGap = 5,
Doc=document.doc umentElement,
DocBody = document. body;
CompY = initY = 200;
Roll. style. right = initX + "px ";
; (Function (){
Var curScrollTop = (doc. scrollTop | docBody. scrollTop | 0)-(doc. clientTop | docBody. clientTop | 0 );
// The value of each comP is different until roll. style. top === doc. scrollTop + initY;
CompY + = (curScrollTop + initY-compY)/sp;
Roll. style. top = Math. ceil (compY) + "px ";
SetTimeout (arguments. callee, timeGap );
})();