Make th's text fixed when scrolling

Question

I got the following situation:

<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>

What I want to achieve is that the first heading's text (Heading Title), to be always visible, as long as I can see one of it's "childs". Sort of like fixed inside it's own boundaries.

EDIT

It's not duplicate, it's a completely different question. This is what I want to achieve:

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

I want the title inside the th to move inside it's boundaries according to scrolling.

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;
}