滚动时固定文本

Question

我遇到以下情况：

<tbody>
    <tr>                                                     | 
        <th rowspan="30"><span>Heading Title</span></tr>     |
        <th>Other heading</th>                               |
        <td>value</td>          | x X                        |
    </tr>                                                    |  x Z
    <tr>                                  |                  |
        <th>Other heading</th>            | x Y              |
        <td>value</td>          | x X     |                  |
    </tr>                                 |                  |
</tbody>

我想要实现的是第一个标题的文本（标题标题）始终可见，只要我能看到它的一个“孩子”。有点像固定在它自己的边界内。

修改

这不是重复，这是一个完全不同的问题。这就是我想要实现的目标：

 HEAD 1       HEAD 2     DATA      DATA        DATA
______________________________________________________
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|  Title   |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|__________|__________|_________|___________|_________|
|  Title   |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|__________|__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|          |__________|_________|___________|_________|
|__Title___|__________|_________|___________|_________|

我希望th内的标题根据滚动在其边界内移动。

Answer 1

<强>的jQuery

jQuery(function(){
    var tableOffset = $('table').offsetTop - 30; // or however many px from the top the first non-th tr will be
    jQuery(document).bind('ready scroll',function() {
        var docScroll = $(document).scrollTop();
        if(docScroll >= tableOffset ) {
            jQuery('tr:first').addClass('fixed');
        } else {
            jQuery('tr:first').removeClass('fixed');
        }
    });
});

<强> CSS

tr:first-child{
  position:static; /* or relative or whatever */
}
tr.fixed{
  position:fixed !important;
}