前端开发

首页 > 前端开发 > javascript > JavaScript实现div层跟随滚动条滑动

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

分享到：

【字体：大中小】

2016-11-03
来源：网络
513
57
3

导读：
JavaScript实现div层跟随滚动条滑动在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置效果展示如下所示：代码如下： !DOCTYPEhtmlhtmllang=enheadmeta...

JavaScript实现div层跟随滚动条滑动在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置

效果展示如下所示：

代码如下：





JavScript页面悬浮框- 何问起



何问起 特效

原文效果

在一个页面放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;
}






您好!欢迎来到....^ ^

{ margin: 0px; padding: 0px; } body { background-attachment: fixed; /* prevent screen flash in IE6 */ } #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 fixed for IE6 */ _position: absolute; _top: expression(documentElement.scrollTop + "px"); height: 28px; }

前端开发

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

Tags

About