Kullanıcı jQuery ile görünümün dışına kaydırdığında tablo başlığının üstte sabit kalması

Kullanıcı sayfayı kaydırarak görünümden çıkardığında VE SADECE başlığın sayfanın en üstünde kalacağı bir HTML tablosu tasarlamaya çalışıyorum. Örneğin, tablo sayfadan 500 piksel aşağıda olabilir, kullanıcı başlığı görünümün dışına kaydırırsa (tarayıcı artık bir şekilde pencere görünümünde olmadığını algılar), üstte kalmasını nasıl sağlayabilirim? Bunun için bana bir Javascript çözümü verebilecek olan var mı?

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

Yani yukarıdaki örnekte, <thead>ın görünümden çıkması durumunda sayfayla birlikte kaymasını istiyorum.

ÖNEMLİ: <tbody>nin bir kaydırma çubuğuna (overflow:auto) sahip olacağı bir çözüm HAYIR arıyorum.

Sam Dufel
Edited question 2018ösp59ös23 Mayıs 2018 в 11:59
Programlama
html jquery html-table
2011ööp48öö1 Ocak 2011 в 1:48
35 görünümler
Çözüm

Bunun gibi bir şeyi window üzerindeki scroll olay işleyicisine dokunarak ve sayfanın üst kısmında başlığı göstermek için sabit bir konuma sahip başka bir table kullanarak yapabilirsiniz.

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ı orijinal tablo başlığını gizleyecek kadar aşağı kaydırdığında tablo başlığını gösterecektir. Kullanıcı sayfayı tekrar yeterince yukarı kaydırdığında tekrar gizlenecektir.

Çalışma örneği: http://jsfiddle.net/andrewwhitaker/fj8wM/

Andrew Whitaker
Edited answer 2015ösp53ös17 Mayıs 2015 в 5:53
Yorumlar (21)

Ben de aynı etkiyi sabit boyutlu sütunlara başvurmadan veya tüm tablo için sabit bir yüksekliğe sahip olmadan elde etmeye çalışıyordum.

Bulduğum çözüm bir hack. Tüm tabloyu çoğalttıktan sonra başlık hariç her şeyi gizlemek ve bunun sabit bir konuma sahip olmasını sağlamaktan oluşuyor.

HTML

<div id="table-container">
<table id="maintable">
    <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>some really long line here instead</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>
                <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
    </tbody>
</table>
<div id="bottom_anchor"></div>
</div>
body { height: 1000px; }
thead{
    background-color:white;
}

javascript


function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll>anchor_top && scroll
neubert
Edited answer 2016ösp45ös20 Ağustos 2016 в 8:45
Yorumlar (15)

Sütun genişliklerini değiştirerek sorunu çözebildim. Andrew'un yukarıdaki çözümüyle başladım (çok teşekkürler!) ve sonra klonlanmış td'lerin genişliklerini ayarlamak için küçük bir döngü ekledim:

$("#header-fixed td").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 td").eq(index).width();
    });
});

Bu, tüm tabloyu klonlamak ve gövdeyi gizlemek zorunda kalmadan sorunu çözer. JavaScript ve jQuery'de (ve stack overflow'da) çok yeniyim, bu yüzden her türlü yorumunuz için teşekkür ederim.

Yorumlar (1)