<body>
<div style="position: absolutez-index:90" id="div1">我不动</div>
<div>我动<div>
</body>
//有的将position设置成fixed,我试了试效果不如position好,设置z-index,向里的深度,我这儿设置90,你要覆盖几个div,设置数大于那个数就行。
js中:
我这儿用jquery写。
$(document).ready(function(){
$(window).scroll(function(){//滚动时触发函数
$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。
})
})
导入jquery库,效果就出来了。
<html><head>
<title>悬浮窗口示例</title>
<scripttype="text/javascript">
window.onscroll=function(){
vardiv=document.getElementById("divSuspended")
div.style.top=document.body.scrollTop
}
window.onresize=window.onscroll
functioninit(){
vardf=document.createDocumentFragment()
for(vari=0i<20i++){
varp=document.createElement("p")
p.appendChild(document.createTextNode("Line"+i))
df.appendChild(p)
}
document.body.appendChild(df)
window.onscroll()
}
</script>
</head>
<bodyonload="init()">
<p>Tryscrollingthiswindow.</p>
<divid="divSuspended"style="position:absolutebuttom:0pxright:0pxcolor:#ccccccwidth:150pxheight:30pxbackground-color:navy">这是悬浮窗口</div>
</body>
</html>