css实现代码
<div style="position: fixedtop:100pxleft: autoright: auto bottom: auto" ></div>
一般的网站的浮动广告以及浮动菜单等可以使用fixed来实现,js的话需要计算位置以及滚动条滚动时触发事件从而进行计算使用window.onscroll事件代码如下
HTML部分代码
<div style="position:absolutebackground-color:redwidth: 50pxheight: 50px" id="box"></div>
Javascript部分代码
window.onscroll=function(){
var box= document.getElementById("box")
var t = document.documentElement.scrollTop || document.body.scrollTop
box.style.top=t+"px"
}
实际上细心的朋友会发现,这个顶部的工具条实则是一个平铺的背景图像,CSS起到固定背景的作用,也算是一种独特的实现方法。顶部拖动无闪烁菜单栏
*
{
margin:
0px
padding:
0px
}
body
{
background-image:
url()
background-attachment:
fixed
}
#topNavWrapper
{
width:
980px
text-align:
left
height:
31px
margin:
0px
auto
z-index:100
_position:
relative
_top:0px
}
#topNav
{
width:
980px
float:
left
display:
block
z-index:
100
overflow:
visible
position:
fixed
top:
0px
/*
position
fixed
for
IE6
*/
_position:
absolute
_top:
expression(documentElement.scrollTop
+
"px")
background-image:
url(/upload/2010-3/20100303232637297.gif)
background-repeat:
no-repeat
background-position:
right
height:
31px
}
脚本之家
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]