SORU
17 Ocak 2011, PAZARTESİ


Tablo jQuery ile görüntü dışında kullanıcı gezinir üstünde sabit kalmak Başlığı

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.

CEVAP
17 Ocak 2011, PAZARTESİ


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/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • FD2097

    FD2097

    21 HAZİRAN 2009
  • jocc talking shit

    jocc talking

    6 NİSAN 2007
  • xXGAMERrs_Xx

    xXGAMERrs_Xx

    31 Temmuz 2014