Implementation of advertising effect on the side of js webpage as the page scrolls_javascript skills

a.ScrollTop calculation;
b. Calculation of positioning value of scroll element;
c. Scroll cycle setting;
The code is as follows:
css part:

Copy code The code is as follows:

/*Height for testing*/
body{ height:3000px;}
div ,ul,li,body{margin:0; padding:0;}
/*position:absolute; used for positioning elements*/
#roll{width:50px; height:100px; background:#99CC00 ; position:absolute;}

Html code:

Copy code The code is as follows:

JS code:

Copy 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 the screen will flicker under IE;
timeGap =5,
doc=document.documentElement,
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 compP is different every time ; Until roll.style.top===doc.scrollTop initY;
compY =(curScrollTop initY-compY)/sp;
roll.style.top=Math.ceil(compY) "px";
setTimeout(arguments.callee,timeGap);
})();