This article describes how to realize the sharing of JS to slide as the page scrolls. Share it for your reference. The details are as follows:
The page scrolls up and down, and the shared module slides with it.
Key points:
Copy the codeThe code is as follows:
var scrtop =||;
var height = ||;
var top = scrtop + (height - )/2;
top = parseInt(top);
var height = ||;
var top = scrtop + (height - )/2;
top = parseInt(top);
Get the vertical centering position of the page
On code:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>Untitled document</title>
<style>
body{margin:0; padding:0; font:12px/1.5 arial; height:2000px;}
#jb51{width:100px; height:200px; line-height:200px;
text-align:center; border:1p solid #ccc;
background:#f5f5f5; position:absolute; left:-100px; top:0;}
#jb51_tit{position:absolute; right:-20px; top:60px;
width:20px; height:60px; padding:10px 0;
background:#06c; text-align:center;
line-height:18px; color:#fff;}
</style>
<script>
= function(){
var jb51 = ("jb51");
= function(){
startrun(jb51,0,"left")
}
= function(){
startrun(jb51,-100,"left")
}
= = function(){
var scrtop=||;
var height=||;
var top = scrtop + (height - )/2;
top = parseInt(top);
startrun(jb51,top,"top")
}
}
var timer = null
function startrun(obj,target,direction){
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(direction == "left"){
speed = ()/8;
speed = speed>0?(speed):(speed);
if( == target){
clearInterval(timer);
}else{
= + speed + "px";
}
}
if(direction == "top"){
speed = ()/8;
speed = speed>0?(speed):(speed);
if( == target){
clearInterval(timer);
}else{
= + speed + "px";
}
= + ',' + target + ',' +speed;
}
},30)
}
</script>
</head>
<body>
<div >
Share to content
<span >Share to</span>
</div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.