基于JavaScript实现div层跟随滚动条滑动
在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置
效果展示如下所示：
代码如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavScript页面悬浮框-何问起</title><basetarget="_blank"/>
<style>
body{
height:2000px;
}
#div1{
width:100px;
height:150px;
background:red;
position:absolute;
right:0;
top:200px;
}
#div2{
width:200px;
height:200px;
background:green;
position:absolute;
left:0;
top:200px;
}a{color:white}
</style>
</head>
<body>
<divid="div1"><ahref="http://hovertree.com">何问起</a><ahref="http://hovertree.com/texiao/">特效</a></div>
<divid="div2"><ahref="http://hovertree.com/h/bjaf/mbrpxe4o.htm">原文</a>
<ahref="http://hovertree.com/texiao/jsstudy/1/">效果</a>
</div>
<divid="hovertree"style="position:fixed;top:100px;left:40%;z-index:99;height:100px;width:100px;background-color:silver"></div>
<div>在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置</div>
<script>
varh_div1=document.getElementById('div1'),h_div2=document.getElementById('div2');
varh_hvttop=200;
window.onscroll=function(){
HoverTreeMove(h_div1,h_hvttop)
HoverTreeMove(h_div2,h_hvttop)
//显示信息
varh_scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离
varh_hovertree=document.getElementById('hovertree');
h_hovertree.innerHTML=h_div1.offsetTop+"hovertree<br/>"+h_scrollTop+"<br/>"+h_div1.style.top;
};
functionHoverTreeMove(obj,top)
{
varh_scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动的距离
varh_buchang=20;
if(obj.offsetTop<h_scrollTop+top-h_buchang)
{
obj.style.top=obj.offsetTop+h_buchang+"px";
setTimeout(function(){HoverTreeMove(obj,top);},80);
}
elseif(obj.offsetTop>h_scrollTop+top+h_buchang)
{
obj.style.top=(obj.offsetTop-h_buchang)+"px";
setTimeout(function(){HoverTreeMove(obj,top);},80);
}
else{
obj.style.top=h_scrollTop+top+"px";
}
}
HoverTreeMove(h_div1,200)
HoverTreeMove(h_div2,200)
</script>
</body>
</html>
下面给大家分享一段代码页面顶端固定div，不随滚动条移动，提示浏览器信息
例子1：
<html>
<head>
<styletype="text/css">
#topNavWrapper{
height:29px;
margin:0pxauto;
min-width:1000px;
z-index:100;
_position:relative;
_top:0px;
}
#topNav
{
width:100%;
display:block;
z-index:100;
overflow:visible;
position:fixed;
top:0px;
_position:absolute;
_top:expression(documentElement.scrollTop-5+"px");
background-color:#EBEBEB;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#D0D0D0;
height:28px;
min-width:1000px;
}
#top
{
margin:0pxauto;
width:1000px;
position:relative;
}
.left
{
left:5px;
top:6px;
width:200px;
position:absolute;
}
.leftlx
{
left:205px;
top:6px;
width:300px;
position:absolute;
}
.right
{
left:830px;
top:6px;
width:170px;
position:absolute;
}
#topa
{
text-decoration:none;
color:#747474;
}
#topa:hover
{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<divid="topNavWrapper">
<divid="topNav">
<divid="top">
<divclass="left">您好!欢迎来到....^^</div><divclass="leftlx"><ahref="about.aspx?id=1">[联系我们]</a> 客户服务热线:400-699-1111</div>
<divclass="right">
<tablecellpadding="0"cellspacing="0"><tr><td><ahref="#">简体中文</a></td><td>|</td><td><ahref="big5.html">繁体中文</a></td>
<td>|</td><td><aonclick='window.external.addFavorite("http://www.xxxx.com","xxxx")'href="#">收藏本站</a></td></tr></table>
</div>
</div>
</div>
</div>
</body>
</html>
例子2：
<styletype="text/css">
{
margin:0px;
padding:0px;
}
body{
background-attachment:fixed;/*preventscreenflashinIE6*/
}
#topNavWrapper{
width:100%;
text-align:left;
height:28px;
margin:0pxauto;
z-index:100;
_position:relative;
_top:0px;
}
#topNav{
width:100%;
float:left;
display:block;
z-index:100;
overflow:visible;
position:fixed;
top:0px;/*positionfixedforIE6*/
_position:absolute;
_top:expression(documentElement.scrollTop+"px");
height:28px;
}
</style>