滚动时将整张桌子粘到原来的位置

问题描述：

我试图在滚动页面的同时制作粘贴表格。目前我有两张桌子，但是当我滚动页面时，只有第一张桌子移动了大约10px;并停下来。这是我的JSFiddle，我的桌子根本不动。任何人都可以建议我，我做错了什么？滚动时将整张桌子粘到原来的位置

HTML：

<div id="header"> 
    header 
</div> 

<table class="table_filter_data filter_table" cellpadding='0' cellspacing='0' width='100%'> 
    <tr> 
     <td> 
      table_1 
     </td> 
    </tr> 
</table> 
     <table class="table_filter_data filter_table" cellpadding='0' cellspacing='0' width='100%'> 
    <tr> 
     <td> 
      table_2 
     </td> 
    </tr> 
</table>

的jQuery：

<script type="text/javascript"> 
      function UpdateFilterHeaders() { 
       $("div.div_filter_table").each(function() {     
       var originalTable = $(".tableFloatingHeaderOriginal", this); 
       var floatingTable = $(".tableFloatingHeader", this); 

       var offset = $(this).offset(); 
       var scrollTop = $(window).scrollTop(); 

       if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) { 
        floatingTable.css("visibility", "visible"); 
        originalTable.css("visibility", "hidden"); 
        floatingTable.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingTable.height()) + "px"); 

        // Copy cell widths from original header 
        $(floatingTable).each(function(index) { 
         var cellWidth = $(originalTable).eq(index).css('width'); 
         $(this).css('width', cellWidth); 
        }); 

        // Copy row width from whole table 
        floatingTable.css("width", $(this).css("width")); 
       } 
       else { 
        originalTable.css("visibility", "visible"); 
        floatingTable.css("visibility", "hidden"); 
        floatingTable.css("top", "0px"); 
       } 
       }); 
      } 

      $(document).ready(function() { 

       $("table.filter_table").each(function() { 
        $(this).wrap("<div class=\"div_filter_table\" style=\"position:relative\"></div>"); 

        var originalTable = $(this);     
        var clonedTable = originalTable.before(originalTable.clone() 
        .addClass("tableFloatingHeader") 
        .css("position", "absolute") 
        .css("top", "0px") 
        .css("left", $(this).css("margin-left")) 
        .css("visibility", "hidden")); 

        originalTable.addClass("tableFloatingHeaderOriginal"); 
       }); 
       UpdateFilterHeaders(); 
       $(window).scroll(UpdateFilterHeaders); 
       $(window).resize(UpdateFilterHeaders); 
      }); 
     </script>

CSS：

body {height:2000px;} 
.table_filter_data{ margin: 0px ; padding: 0px; padding-left: 3px; padding-top: 10px;} 
.table_filter_data > tbody > tr > td{ padding: 2px; text-align: left; font-size: 0.9em;} 
.table_filter_data > tbody > tr > td.title{ text-align: right;}    
.table_filter_data > tbody > tr > td > input{ font-size: 0.9em;} 
.table_filter_data > tbody > tr > td > select{ font-size: 0.9em;} 
#header {height: 100px; border: 1px solid gray}

请在你的帖子中包含你的代码：http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-link-to-jsfiddle – Lowkase 2013-05-09 12:42:05

你能不能请一把小提琴？ – 2013-05-09 12:51:57

@RupamDatta看看描述，它是一个链接。 http://jsfiddle.net/StaG8/3/ – DeividasJJ 2013-05-09 12:53:49

答

我会建议使用position: fixed对于要被粘表。

滚动时将整张桌子粘到原来的位置

相关推荐