My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they reach the fixed header, at which point they should remain static until the rest of the section has scrolled beneath them, and then be swapped out with the next sticky subheader (similar to the iPhone address book). For reference, here's an example of the desired outcome: Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery
While the example provided isn't based on a table, I need to display a large amount of tabular data, so the design must involve a table structure. I have searched for existing examples of this functionality but have been unsuccessful. I have also included a link to a jsfiddle example without fixed headings to prevent conflicts with other solutions: 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>
...
I would greatly appreciate any assistance in achieving this design. It has been a challenging problem for me to solve.