基于JavaScript实现div层跟随滚动条滑动

在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置

效果展示如下所示：

代码如下：

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}



何问起 特效
原文
效果


在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置

下面给大家分享一段代码页面顶端固定div，不随滚动条移动，提示浏览器信息

例子1：

#topNavWrapper {
height: 29px;
margin: 0px auto;
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: 0px auto;
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;
}
#top a
{
text-decoration: none;
color:#747474;
}
#top a:hover
{
color: blue;
text-decoration: underline;
}






您好!欢迎来到....^ ^[联系我们]  客户服务热线: 400-699-1111

简体中文
|
繁体中文
|
收藏本站

例子2：

{
margin: 0px;
padding: 0px;
}
body {
background-attachment: fixed; 
}
#topNavWrapper {
width: 100%;
text-align: left;
height: 28px;
margin: 0px auto;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;
float: left;
display: block;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; 
_position: absolute;
_top: expression(documentElement.scrollTop + "px");
height: 28px;
}