Jquery 浮动标题对齐问题

Question

我正在使用来自http://mkoryak.github.io/floatThead/ 的浮动标题脚本，这似乎与与宽度比屏幕宽的表格一起使用时不同。

然后当您向下滚动时，列和标题不再对齐。

我正在使用 :

调用脚本

$(document).ready(function(){
     $("#my_table").sticky();

});

我创建了这个 FIDDLE 来显示问题。加载时页面看起来不错，但一旦开始滚动，对齐就消失了。

有什么办法解决这个问题吗？

我实际使用的表格并没有这么大，但它很大。理想情况下，我想减少列数，但对于这个特定的网站，这是不可能的。

更新

我现在已经使用我在网上找到的一个示例来完成这项工作。 NEW FIDDLE

我有 2 个轻微的滚动问题。

1. 使用鼠标滚轮滚动看起来有点生涩，尤其是在标题中。
2. 滚动到页面底部，似乎强制部分向上滚动到页面下部。

有什么办法可以解决这些问题？

小提琴显示了第二个问题，但第一个问题在小提琴上并不明显。

Answer 1

您可以在table标签中使用thead和tbody来转移标题和数据。比定义 css 正确对齐。之后，您可以使用下面的代码作为粘性标题：

jsFiddle Example

jQuery：

$(document).ready(function() {
   var theadH = $('thead').outerHeight(true);
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 0 ) {
            $('thead').css({'position':'fixed'});
            $('tbody').css({'margin-top': theadH +'px'});
        } else {
            $('thead').css({'position':'static'});
            $('tbody').css({'margin-top': '0px'});
        }
    });
 });

css：

table { width: 100%; }
th,td {  width: 20%; } /* there are five collums */
thead { top:0; }

html：

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <thead>
        <tr>
            <th>ÜRÜN</th>
            <th>ADEDİ</th>
            <th>TUTAR</th>
            <th>ÖDENEN TUTAR</th>
            <th>MUALLAK TUTAR</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>90 - Dask</td>
            <td>2</td>
            <td>133</td>
            <td>2347630</td>
            <td>2347630</td>
        </tr>
        <tr>
            <td>95 - Dask</td>
            <td>4</td>
            <td>140</td>
            <td>234699</td>
            <td>234699</td>
        </tr>
    </tbody>
</table>