2012-09-05 109 views
1

我試圖做固定滾動頭。在這個過程中,試圖修復HEAD表格的位置。我做的。但是,當我滾動表格時,HEAD表閃爍。它在Firefox中不閃爍。我不希望在IE,Chrome或任何瀏覽器中出現閃爍現象。任何幫助將不勝感激。當我滾動時閃爍表

CSS代碼:

<style type="text/css"> 
th { 
    background:#663300; 
    color:#FFF;} 
</style> 

jQuery代碼

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainDiv").scroll(function() { 
       var offSet = $("#mainDiv").offset().top; 
       $("#headTable").offset({"top":offSet}); 
      }); 
    }); 
</script> 

HTML代碼(FULL PAGE CODE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
th { 
    background:#663300; 
    color:#FFF;} 
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#mainDiv").scroll(function() { 
       var offSet = $("#mainDiv").offset().top; 
       $("#headTable").offset({"top":offSet}); 
      }); 
    }); 
</script> 
</head> 

<body> 
<p style="height:100px;">&nbsp;</p> 
<div id="mainDiv" style="border:1px solid red; width:400px; height:100px; overflow:auto; position:relative;"> 
    <table id="headTable" border="0" cellpadding="0" cellspacing="0" width="600" style="z-index:10;"> 
     <tr> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
      <th>asdf</th> 
     </tr> 
    </table> 
    <table id="bodyTable" border="0" cellpadding="0" cellspacing="0" width="600" style="z-index:9;"> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
     <tr> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
      <td>asdf</td> 
     </tr> 
    </table> 
</div> 
</body> 
</html> 
+0

你在使用什麼瀏覽器? –

+0

IE7,IE8,IE9,Chrome –

回答

0

的Bec如果使用onscroll速度很慢,並且不會提供使其平滑所需的精度。沒有必要使用onscroll設置標題,CSS位置可滾動div頂部的標題表。

+2

那麼,解決方案是什麼? –

+0

我該如何實現它? –