Fixierung der Tabellenüberschrift am oberen Rand, wenn der Benutzer sie mit jQuery aus dem Blickfeld scrollt

Ich versuche, eine HTML-Tabelle zu entwerfen, bei der die Kopfzeile oben auf der Seite bleibt, wenn und NUR wenn der Benutzer sie aus dem Blickfeld scrollt. Zum Beispiel kann die Tabelle 500 Pixel nach unten von der Seite, wie mache ich es so, dass, wenn der Benutzer scrollt die Kopfzeile aus der Sicht (Browser erkennt seine nicht mehr in der Windows-Ansicht irgendwie), wird es an der Spitze setzen bleiben? Kann mir jemand eine Javascript-Lösung für dieses Problem nennen?

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

Also im obigen Beispiel möchte ich, dass die Kopfzeile mit der Seite scrollt, wenn sie aus dem Blickfeld verschwindet.

WICHTIG: Ich bin NICHT auf der Suche nach einer Lösung, bei der das <tbody> eine Bildlaufleiste hat (overflow:auto).

Sam Dufel
Bearbeitete Frage 23. Mai 2018 в 11:59
Programmierung
html jquery html-table
17. Januar 2011 в 1:48
13 Aufrufe
Lösung

Sie würden so etwas tun, indem Sie den "scroll"-Ereignishandler von "window" anzapfen und eine andere "table" mit einer festen Position verwenden, um die Kopfzeile oben auf der Seite anzuzeigen.

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

Damit wird der Tabellenkopf eingeblendet, wenn der Benutzer so weit nach unten scrollt, dass der ursprüngliche Tabellenkopf ausgeblendet wird. Er wird wieder ausgeblendet, wenn der Benutzer die Seite wieder weit genug nach oben gescrollt hat.

Arbeitsbeispiel: http://jsfiddle.net/andrewwhitaker/fj8wM/

Andrew Whitaker
Bearbeitete Antwort 8. Mai 2015 в 5:53
Kommentare (21)

Nun, ich habe versucht, den gleichen Effekt zu erzielen, ohne auf Spalten mit fester Größe zurückzugreifen oder eine feste Höhe für die gesamte Tabelle zu haben.

Die Lösung, die ich gefunden habe, ist ein Hack. Sie besteht darin, die gesamte Tabelle zu duplizieren und dann alles bis auf die Kopfzeile auszublenden, die dann eine feste Position hat.

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
Bearbeitete Antwort 24. August 2016 в 8:45
Kommentare (15)

Ich war in der Lage, das Problem mit der Änderung der Spaltenbreiten zu beheben. Ich begann mit Andrew's Lösung oben (vielen Dank!) und fügte dann eine kleine Schleife, um die Breiten der geklonten td's gesetzt:

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

Damit ist das Problem gelöst, ohne dass ich die gesamte Tabelle klonen und den Körper ausblenden muss. I'm ganz neu zu JavaScript und jQuery (und zu Stack Overflow), so dass alle Kommentare geschätzt werden.

Kommentare (1)