Method of fixing suspended table head (THEAD) in the head of Web page making

Two days after the request, the page is like this

Then the requirement is the table on the page when the page scrolls up and the table header reaches the top of the window, the header hovers above the page and the table scrolls normally, so that the data in the table can see the header content at any time.

At first I think it is very simple, when the page scrolling, to determine the distance between the table head to the window, when the =0 trigger event and then let the table head position:fixed not all right? So I to beautiful and cute products sister said, rest assured, this simple very soon can be done, then my expression is like this

But when I started to write (first you want to know, I am a JS small white, the table asked me why ...) ), the problem is coming. First of all, this page should scroll with $ (window). Scroll, so how can I judge the distance from the table head to the window? I immediately thought of offset, here just to review the difference between offset () and position (), first of all, they do represent the position, but, offset (). Top is the distance from the top of the document, meaning this value. If you don't operate the DOM properly, is not changed, position is the distance of the element relative to the parent element. Nothing is right ... Then I thought of scrolltop (), you see this with scroll look so like sure no problem! But when I take a closer look at the API, "get the position of the current vertical scrollbar of the first element in the matching element collection or set the position of the vertical scrollbar for each matched element", read it again and again, but I understand the scrolling distance of the element's scroll bars within that area, for example, if you write a div, Fixed height, and then Overflow:scroll, then the scrolltop of the div is the vertical distance from the scroll bar that appears after the content, saying a bunch of things doesn't seem to work .... In short, you cannot simply use ScrollTop () to get the table head to the top of the window distance.

At a time of deadlock ... What to do, I went to the toilet to think about life ...

Well, after the thought struggle on the toilet, my mind is extremely cheerful. Since a single cannot be combined, use $ (' body '). ScrollTop () with the header offset (). Top difference, because the page opens the default scrollbar is at the top, and if you want to roll the header to the top of the window then the scrollbar will scroll the header offset (). Top of the distance, when greater than this value then the table head must have been in the top of the negative area can not see, hmm ...

After solving this problem, I rejoice for myself, however, there is still a problem waiting for me. That is, if the table header is position:fixed directly, the table header is actually out of the normal flow of the document. Except for the contents of the inside of the style has gone ah, I fell! Even if the style is reluctantly added, because the contents of the table are free to expand, so the column width is determined by the table header and the elements in the table, it is not possible to take out the table head alone!!

Then, well, I dynamically generated a div,clone of the entire table, get the table header high to this div, and then let this div overflow:hidden! In my day, I'm just a genius. No more nonsense, give the source ~

<Scriptsrc= "Js/jquery-latest.js"></Script><Script>    $(function(){        varScroll_bar= $("#scroll_bar");//ID of the tablevarBar_head= $("#bar_head");//table HeadervarBar_height=bar_head.height ();//Table Head highvarSroll_header=Scroll_bar.clone (). attr ('ID','BB');//Change the copied table ID $ (window). Scroll (function(){            varScroll_top= $('Body'). scrolltop ()-Scroll_bar.offset (). top;//decide whether to reach the top of the windowif(Scroll_top> 0) {                $('Body'). Append ('<div id= "Shelter" ></div>');//The container where the copied table is located $ ("#shelter"). css ({'Height': Bar_height,'position':'fixed','Top':'0','Overflow':'Hidden','width':'1200px','margin': '0 Auto',' Left':'0',' Right':'0','Border-bottom':'1px solid #c8c8c8'}); Sroll_header.appendto ('#shelter'); $('#shelter Table'). Removeclass (); Remove the original default class from table, preventing margin,padding equivalent effect style $ ('#shelter Table'). css ({'width':'100%','Background-color':'#f0f0f0'}); $('#shelter table TR th'). css ({'Height': Bar_height,'width':'140px','Border':'1px solid #c8c8c8'});//This can be used to self-play $ ('#shelter Table TR TD'). css ({'padding':'10px','text-align':'Center'}); $('#shelter'). Show (); }Else {                $('#shelter'). Hide ();    }        }); });</Script>

Also attach a I find the other implementation method, but I feel too heavy, so give up, or put down the link to their own reference it

Http://www.uedsc.com/sticky-table-headers-columns.html

That's all, welcome to the children's shoes criticism questioned ~

Method of fixing suspended table head (THEAD) in the head of Web page making