JS悬浮窗口如何实现

JavaScript012

JS悬浮窗口如何实现,第1张

jsp中:

<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>