【JavaScript】悬浮窗口

【JavaScript】悬浮窗口

【JavaScript】悬浮窗口

马嘉楠 2009-01-13


共同学习,欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2009/01/11/3754521.aspx】,谢谢O(∩_∩)O!


主要是window.onscroll的运用

效果如图:



【JavaScript】悬浮窗口_第1张图片

代码如下:

<html>
    
<head>
        
<title>悬浮窗口示例</title>
        
<script type="text/javascript">
            window.onscroll 
= function  () {
                
var div = document.getElementById("divSuspended"
);
                div.style.top 
=
 document.body.scrollTop;
            }
            window.onresize 
=
 window.onscroll;
            
function
 init(){
                
var df =
 document.createDocumentFragment();
                
for(var i=0;i<20;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: absolute; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">这是悬浮窗口</div>
    
</body>
</html>


 



马嘉楠
[email protected]

你可能感兴趣的:(【JavaScript】悬浮窗口)