сделать текст TH в фиксированный при прокрутке

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> 

То, что я хочу добиться того, что текст первого заголовка (в Heading Заголовок), чтобы всегда быть видимым, до тех пор, как я могу увидеть одну из его «детей». Похоже, что он закреплен внутри своих границ.

EDIT

Это не дублировать, это совершенно другой вопрос. Это то, что я хочу добиться:

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

Я хочу титул внутри й двигаться внутри это границы в соответствии с прокруткой.

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