我正在尝试创建一个带有固定标题的表格，其中正文在头部滚动 - 这很好，并且有很多很好的例子。
复杂的是，我希望能够使用粘贴的子标题滚动表格的其余部分，直到它们击中表格标题，然后在该部分的其余部分滚动到它们下面之前不要移动，哪一点他们被下一个粘性子标题取代（有点像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>
非常感谢任何帮助。这个真让我难过。
答案 0 :(得分：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();
});