1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
    
  3. <head> 
    4.  
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5.  
    
  5. <title>无标题文档</title> 
    6.  
    
  6. <style> 
    7.  
    
  7. .h200{ height:200px;} 
    8.  
    
  8. .h1800{ height:1800px;} 
    9.  
    
  9. .test{width:460px;height:60px;border:solid 1px #FF6600;background:#F90;position:absolute;} 
    10.  
    
  10. .box_fixed{position:fixed;top:0px;} 
    11.  
    
  11. </style> 
    12.  
    
  12. </head> 
    13.  
    
  13.  
    14.  
    
  14. <body> 
    15.  
    
  15.     <div class="h200"></div> 
    16.  
    
  16.     <div class="test" id="test">我来测试下</div> 
    17.  
    
  17.     <div class="h1800"></div> 
    18.  
    
  18. <script type="text/javascript"> 
    19.  
    
  19.     var scrollFixed = function(elem){ 
    20.  
    
  20.         this.elem = elem; 
    21.  
    
  21.         this.elemTop = scrollFixed.prototype.getElementTop(elem);    
    22.  
    
  22.     } 
    23.  
    
  23.     scrollFixed.prototype = { 
    24.  
    
  24.         getScrollTop : function(){ 
    25.  
    
  25.             if(document.documentElement && document.documentElement.scrollTop){ 
    26.  
    
  26.                 return document.documentElement.scrollTop;   
    27.  
    
  27.             }else if(document.body && document.body.scrollTop){ 
    28.  
    
  28.                 return document.body.scrollTop;  
    29.  
    
  29.             }    
    30.  
    
  30.         }, 
    31.  
    
  31.         getElementTop : function(elem){ 
    32.  
    
  32.             var eTop = elem.offsetTop; 
    33.  
    
  33.             var eParent = elem.offsetParent; 
    34.  
    
  34.             if(eParent!=null){ 
    35.  
    
  35.                 eTop +=eParent.offsetTop; 
    36.  
    
  36.                 eParenteParent = eParent.offsetParent;  
    37.  
    
  37.             } 
    38.  
    
  38.             return eTop;     
    39.  
    
  39.         }, 
    40.  
    
  40.         onStart : function(){ 
    41.  
    
  41.             window.onscroll = function(that){ 
    42.  
    
  42.                 return function(){          //javascript闭包 
    43.  
    
  43.                     if(that.getScrollTop()>that.elemTop){ 
    44.  
    
  44.                         if(document.body){ 
    45.  
    
  45.                             thatthat.elem.style.top = that.getScrollTop() + "px";    
    46.  
    
  46.                         }else{ 
    47.  
    
  47.                             that.elem.className+= ' box_fixed';  
    48.  
    
  48.                         }    
    49.  
    
  49.                     }else{ 
    50.  
    
  50.                         if(document.body){ 
    51.  
    
  51.                             thatthat.elem.style.top = that.elemTop + 'px';   
    52.  
    
  52.                         }else{ 
    53.  
    
  53.                             that.elem.className = "test";    
    54.  
    
  54.                         }    
    55.  
    
  55.                     }    
    56.  
    
  56.                 }    
    57.  
    
  57.             }(this);     
    58.  
    
  58.         }    
    59.  
    
  59.     }  
    60.  
    
  60. </script> 
    61.  
    
  61. <script> 
    62.  
    
  62.     var a = new scrollFixed(document.getElementById('test')); 
    63.  
    
  63.         a.onStart(); 
    64.  
    
  64. </script> 
    65.  
    
  65. </body> 
    66.  
    
  66. </html> 
    67.