DIV栏目跟随滚动

我们先上效果图看下:

 DIV栏目跟随滚动 笔个记

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> New Document </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.div1{width:980px;height:2000px;
border:1px solid red;
margin:0px auto;}
.div2{width:100px;height:200px;
border:1px solid blue;
position:absolute;
top:100px;
left:10px;}
</style>
</head>
<body>
<div class="div1"></div>
<div id="div2" class="div2"></div>
</body>
<script>
window.onload=test1;
var div2=document.getElementByIdx_x('div2');
//div2.onclick=test1;
var a=div2.offsetTop;
var s=0;//设定初始值
function test1()
{
var b= document.body.scrollTop || document.documentElement.scrollTop;//做兼容
if (s<b)
{
s+=20;
}
if (s==b)
{
clearTimeout(time)
}
if (s>b)
{
s-=20
}
div2.style.top=s+100+"px";
var time=setTimeout(test1,30)
}
</script>
</html>


未经允许不得转载:大谋菠萝格 » DIV栏目跟随滚动

打赏 收藏
分享到: +