Ekranda kalıcı olarak görünen bir HTML tablo satırını saklayın

Question

Çok sayıda satır içeren bir HTML tablom var. Belirli bir satırın ekranda her zaman görünmesini, satırın asıl konumunun ekranda şu anda kaydırılmış olması ve sayfanın üst kısmında kilitli olması durumunda sayfanın en altında kilitlenmesini istiyorum. Şu anda ekranın üstünden kaydırılmış. Satırın gerçek konumu ekranda görünürken, tablonun bir parçası olarak normal olarak kaydırılmalıdır.

Bunu CSS ve JavaScript kullanarak nasıl yapabilirim?

Answer 1

Bu örnek bir çeşit ham halidir, ancak size neyin peşinde olduğunuza yakın bir şey vermelidir. <tr> no'lu sınıfa "yapışkan" sınıfı dondurmak/kilitlemek ve yapışkan öğe görünüp takma konumunu sabitlendiğinde izlemek için belge kaydırma olayına bir olay eklemek gerekir.

bu 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; 
} 

isScrolledIntoViewthis StackOverflow answer gelen fonksiyon bakınız. Ayrıca, yapışkan satırların en yakın kardeşinin ($stickyRow.next()) görünüp görünmediğini kontrol ediyorum, çünkü onu bir bağlantı noktası olarak kullanıyorum.

Answer 2

Eğer tablo her zaman ekrandan daha uzunsa, bunu sadece css ile yaparsınız. Tablodaki gibi:

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

Son satırdaki stil sayfanın altına yapışacaktır.

DÜZENLEME: Tablo yerine satır içi stili (veya açık css) arasında, ekranın büyükse

ekranın altına bu sadece sopa yapmak için, basit javascript bu stilleri eklemek için kullanılabilir :

<script> 
    var table = document.getElementById('table') 
    if (window.innerHeight < table.offsetHeight) { 
     var lastrow = document.getElementById('lastrow') 
     lastrow.style.position = "fixed" 
     lastrow.style.bottom = 0 
    } 
</script> 

Bu dinamik değildir, ancak bazı durumlarda yüksekliğini tekrar kontrol ederek kolayca yapılabilir.