Tabel header vast te blijven aan de bovenkant wanneer de gebruiker scrollt het uit het zicht met jQuery

Ik probeer een HTML-tabel te ontwerpen waarbij de koptekst bovenaan de pagina blijft staan wanneer EN ALLEEN wanneer de gebruiker de tabel uit beeld scrollt. Bijvoorbeeld, de tabel kan 500 pixels naar beneden van de pagina, hoe maak ik het zo dat als de gebruiker scrollt de header uit het zicht (browser detecteert dat het niet langer in het venster weergave een of andere manier), zal het blijven aan de top? Kan iemand mij hiervoor een Javascript oplossing geven?

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

Dus in het bovenstaande voorbeeld, wil ik dat de <thead> mee scrollt met de pagina als het uit beeld gaat.

BELANGRIJK: Ik ben NIET op zoek naar een oplossing waarbij de <tbody> een scrollbar krijgt (overflow:auto).

Sam Dufel
Bewerkte vraag 23ste2 mei 2018 в 11:59
Programmering
html jquery html-table
17de0 januari 2011 в 1:48
10 views
Oplossing

Je zou zoiets kunnen doen door de scroll event handler op window aan te spreken, en een andere table met een vaste positie te gebruiken om de header bovenaan de pagina te tonen.

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();
    }
});

Dit zal de tabelkop tonen wanneer de gebruiker ver genoeg naar beneden scrollt om de originele tabelkop te verbergen. Hij wordt weer verborgen als de gebruiker de pagina weer ver genoeg omhoog heeft gescrolld.

Werkend voorbeeld: http://jsfiddle.net/andrewwhitaker/fj8wM/

Andrew Whitaker
Bewerkt antwoord 8ste4 mei 2015 в 5:53
Commentaren (21)

Ik probeerde hetzelfde effect te bereiken zonder gebruik te maken van kolommen met vaste afmetingen of een vaste hoogte voor de hele tabel.

De oplossing die ik bedacht heb is een hack. Het bestaat uit het dupliceren van de hele tabel en dan alles te verbergen behalve de koptekst, en die een vaste positie te geven.

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
Bewerkt antwoord 24ste2 augustus 2016 в 8:45
Commentaren (15)

Ik was in staat om het probleem met het veranderen van kolombreedtes op te lossen. Ik begon met Andrew's oplossing hierboven (heel erg bedankt!) en voegde toen een kleine lus toe om de breedtes van de gekloonde td's in te stellen:

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

Dit lost het probleem op zonder de hele tabel te hoeven klonen en de body te verbergen. Ik ben helemaal nieuw met JavaScript en jQuery (en stack overflow), dus alle opmerkingen worden op prijs gesteld.

Commentaren (1)