Question

我正在尝试在滚动页面时制作粘性表格。目前我一个接一个地有两个表，但是当我滚动页面时，只有第一个表移动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}

Answer 1

我建议将position: fixed用于您想要粘贴的表格。

滚动时将整个桌子固定在原来的位置

1 个答案: