Maintain a <tbody /> "on page" when moving scroll to bottom of the page

I have a <table /> that have a <tbody class="header" /> with the names of the columns. For usability reasons, I need to mantain it visible when moving the scroll down where the <tbody /> will be lost.

I've done two very (I wish) descriptive images to show how will work.

Scroll on top:

Scroll on bottom:

I have no idea on how to do this on jQuery (plain javascript is valid too!) so, if someone can help me or have done something similar it will be very helpful. I've seen headers that main开发者_开发技巧tains on the top, but is not what I'm looking for.

You could look on "sticky header with javascript"

in this link Fixed div popup you can see a little example with a div and with a little more coding you can write something similar to your table

When i get home i'l create something on jsfiddle.net for you