Halten Sie eine HTML-Tabellenzeile auf dem Bildschirm dauerhaft sichtbar

Question

Ich habe eine HTML-Tabelle mit einer großen Anzahl von Zeilen. Ich möchte immer eine bestimmte Zeile auf dem Bildschirm sehen, die am unteren Rand der Seite gesperrt ist, wenn die aktuelle Position der Zeile gerade vom unteren Bildschirmrand gescrollt und am oberen Rand der Seite gesperrt ist, wenn sie tatsächlich positioniert ist scrollt gerade oben auf dem Bildschirm. Während die aktuelle Position der Zeile auf dem Bildschirm sichtbar ist, sollte sie normal als Teil der Tabelle durchlaufen.

Wie kann ich dies mit CSS und JavaScript erreichen?

Answer 1

Dieses Beispiel ist etwas grob, aber sollte Ihnen etwas geben, was Sie suchen. Sie müssten <tr> angeben, dass Sie die Klasse "sticky" einfrieren/sperren und ein Ereignis an das Dokument-Scroll-Ereignis anhängen möchten, um zu überwachen, wann das sticky-Element in Sicht kommt und die Position umgestellt wird.

Sehen Sie diese fiddle

JS

$(function() { 

    $(document).scroll(function() { 
    var $stickyRow = $('tr.sticky'), 
     $anchor = $stickyRow.next(); 

    $stickyRow.removeClass('fixed top bottom'); 

    if (!isScrolledIntoView($anchor)) { 
     var orientation = ($anchor.offset().top < $(window).scrollTop()) ? 'top' : 'bottom'; 
     $stickyRow.addClass('fixed ' + orientation); 
    } 
    }); 

}); 

function isScrolledIntoView($elem) { 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

CSS

tr.fixed { 
    position: fixed; 
    bottom: 0; 
} 

tr.fixed.bottom { 
    bottom: 0; 
} 

tr.fixed.top { 
    top: 0; 
} 

Die Funktion isScrolledIntoView von this StackOverflow answer kommt. Beachten Sie auch, dass ich überprüfe, ob die klebrigsten Zeilen, die am nächsten sind ($stickyRow.next()), angezeigt werden, weil ich sie als Ankerpunkt verwende.

Answer 2

Wenn die Tabelle immer größer als der Bildschirm ist, tun Sie dies mit nur CSS. In einer Tabelle wie:

<table> 
     <tr> 
      <td>one</td> 
      <td>two</td> 
      <td>three</td> 
      <td>four</td> 
      <td>five</td> 
     </tr> 
     <tr style="position: fixed; bottom: 0;"> 
      <td>sticky one</td> 
      <td>sticky two</td> 
      <td>sticky three</td> 
      <td>sticky four</td> 
      <td>sticky five</td> 
     </tr> 
</table> 

Der Stil in der letzten Zeile wird es am Ende der Seite bleiben.

EDIT:

Um diesen nur Stick an den unteren Rand des Bildschirms zu machen, wenn die Tabelle größer als der Bildschirm ist, anstelle des Inline-Stil (oder expliziten CSS) können einfache Javascript verwendet werden diese Stile hinzufügen :

Dies ist nicht dynamisch, könnte aber leicht gemacht werden, indem die Höhe eines Ereignisses erneut überprüft wird.