Başlık sayfanın en üstünde kullanıcı görünümü dışarı kayar zaman zaman VE YALNIZCA kalacağı bir HTML tablo tasarımı için çalışıyorum. Örneğin, tablo olabilir 500 piksel aşağı sayfa, nasıl yapabilirim ki eğer kullanıcı kaydırma Başlığı dışarı görünümü (tarayıcı algılar onun artık windows görünümünde bir şekilde) kalacak koymak zirvede? Kimse bana bunun için bir Javascript çözümü verebilir misiniz?

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
     <tr>
       <td>info</td>
       <td>info</td>
       <td>info</td>
     </tr>
  </tbody>
</table>

Yukarıdaki örnekte, eğer görüntü dışında giderse <thead> sayfayı kaydırmak için de istiyorum.

ÖNEMLİ: benDEĞİL<tbody> bir kaydırma çubuğu (taşma:otomatik) olacak bir çözüm arıyor.

Yapar mısın böyle bir şeyi vurarak içine scroll olay işleyicisi window ve kullanarak başka table ile sabit bir pozisyon için show Başlığı sayfanın üstüne.

HTML:

<table id="header-fixed"></table>

CSS:

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

Bu kullanıcı yeterince özgün tabloyu gizlemek için aşağı kaydırır zaman kafa kafaya tabloyu gösterecektir. Kullanıcı sayfayı yeterince tekrar kaydırılan etti tekrar ne zaman gizleyecektir.

Örnek çalışma: http://jsfiddle.net/andrewwhitaker/fj8wM/