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

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>

任何帮助将不胜感激。这个真的把我难住了。

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/