具有固定标题的滚动表中的粘性子标题

Question

我想创建一个带有固定表头的表格，其中主体在头部下滚动 - 这很好，有很多出色的示例。但是复杂的是，我想能够拥有粘性子标题，随着表格的其余部分滚动，直到它们撞到表头，然后不移动，直到其余部分已经在它们下面滚动，然后它们被下一个粘性子标题替换（有点像iPhone地址簿）。我需要它看起来像这样的一个示例：Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery 上面的示例没有使用表格，而我有很多需要显示的表格数据，因此它将需要是一个表格。

到目前为止，我还没有找到一个这样工作的例子，我尝试过的一切都失败了。我包含了一个链接到一个jsfiddle示例，它没有任何固定的头等，因为我认为它会避免与其他解决方案的冲突: https://jsfiddle.net/q7zLhus0/

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
</thead>
<tbody>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
    </tr>
    <tr>
        <td>1</td>
        <td>6</td>
        <td>3</td>
        <td>6</td>
        <td>2</td>

    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>7</td>
        <td>2</td>
        <td>5</td>

    </tr>
    <tr>
        <td>S</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>

    </tr>
    <tr>
        <td>8</td>
        <td>5</td>
        <td>3</td>
        <td>7</td>
        <td>9</td>

    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
    </tr>
    <tr>
        <td>A</td>
        <td>5</td>
        <td>3</td>
        <td>H</td>
        <td>D</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>T</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>W</td>
        <td>2</td>
        <td>6</td>
    </tr>
    <tr>
        <td>5</td>
        <td>3</td>
        <td>W</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>9</td>
        <td>E</td>
        <td>3</td>
        <td>S</td>
    </tr>
    <tr>
        <td>T</td>
        <td>4</td>
        <td>D</td>
        <td>H</td>
        <td>S</td>
    </tr>
    <tr>
        <td>4</td>
        <td>S</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>R</td>
        <td>7</td>
        <td>S</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
</tbody>

任何帮助都将不胜感激。这个问题真的让我困扰了。

- TooManyJulians

Answer 1

添加此功能。

function stickyTitles(stickies) {

        var thisObj = this;

        thisObj.load = function () {

            stickies.each(function () {

                var thisSticky = jQuery(this).append('<span class="test" />');
                thisSticky.parent().height(thisSticky.outerHeight());

                jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

            });

            jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {

                thisObj.scroll();

            });
        }

        thisObj.scroll = function () {

            stickies.each(function (i) {

                var thisSticky = jQuery(this),
                    nextSticky = stickies.eq(i + 1),
                    prevSticky = stickies.eq(i - 1),
                    pos = jQuery.data(thisSticky[0], 'pos');

                if (pos <= jQuery(window).scrollTop()) {

                    thisSticky.addClass("fixed");

                    if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                        thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                    }

                } else {

                    thisSticky.removeClass("fixed");

                    if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {

                        prevSticky.removeClass("absolute").removeAttr("style");
                    }
                }
            });
        }
    }

    jQuery(document).ready(function () {

        new stickyTitles(jQuery(".subheader")).load();

    });

演示链接 - https://jsfiddle.net/kjo9w57a/1/

- Lalji Tadhani

---

从功能上讲，这个程序非常好-唯一的问题是子标题的大小会改变，因为它有一个21%的宽度值？如果我移除宽度值，它则没有任何变化....？ - TooManyJulians

应用于这个类“.subheader.fixed”的宽度48％;正在工作。 - Lalji Tadhani

我已经对整个表格进行了更改，然后添加了宽度：https://jsfiddle.net/fns3fm6x/ - TooManyJulians