<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>悬浮窗口示例</title>
<script type="text/javascript">
window.onscroll = function () {
var div = document.getElementById("divSuspended");
div.style.top = document.body.scrollTop+500;//这里+500就跑屏幕中间了，调高度
}
window.onresize = window.onscroll;
function init(){
var df = document.createDocumentFragment();
for(var i=0;i<200;i++){
var p = document.createElement("p");
p.appendChild(document.createTextNode(" Line "+i));
df.appendChild(p);
}
document.body.appendChild(df);
window.onscroll();
}
</script>
</head>
<body onload="init()">
<p>Try scrolling this window.</p>
<div id="divSuspended" style="position: fixed; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">这是悬浮窗口</div>
</body>
</html>
js创建：
function InitServiceLayer() {
if(CS_TVAID == null)
{
return;
}
var csLayer = document.createElement('div');
csLayer.setAttribute("id", "__csLayer");
csLayer.setAttribute("style", "position: fixed;cursor:pointer; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy");
csLayer.innerHTML = "HELLO";
document.body.appendChild(csLayer);
window.onscroll();
}
window.onscroll = function () {
var div = document.getElementById("__csLayer");
div.style.top = document.body.scrollTop + 500;
}
window.onresize = window.onscroll;
点下面的运行运行不了，可另存到单独网页看效果。很不错！