HTMLテーブルの行を画面上に永続的に表示します。

Question

多数の行を持つHTMLテーブルがあります。行の実際の位置が現在画面の下からスクロールされていて、ページの上部にロックされている場合はページの一番下にロックされていることを示します現在、画面の上部からスクロールしています。行の実際の位置が画面上に表示されている間は、テーブルの一部として正常にスクロールする必要があります。

CSSとJavaScriptを使用してこれを実現するにはどうすればよいですか？

Answer 1

この例題は一種のものですが、後で何かに近いものを与えてください。 <tr>に、クラス「スティッキー」をフリーズ/ロックし、イベントをスクロールイベントにアタッチして、スティッキー要素が表示され、トグル位置が固定されたときを監視する必要があります。

この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; 
} 

isScrolledIntoViewがthis StackOverflow answerから来ている関数を参照してください。また、私がアンカーポイントとして使用しているため、最も近い兄弟（$stickyRow.next()）のスティッキー行が表示されているかどうかを確認しています。

Answer 2

テーブルが常に画面よりも大きい場合は、単にcssを使用します。

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

最後の行のスタイルは、ページの下部に固定されます。

EDIT：

テーブルではなく、インラインスタイル（または明示的なCSS）の、画面よりも大きい場合には、画面の一番下に、この唯一のスティックを作るために、簡単なjavascriptのは、これらのスタイルを追加するために使用することができます：

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

これは動的ではありませんが、場合によっては高さを再確認することで簡単に行うことができます。