ScrollFire Materialize reveal List

Question

こんにちは私は以下の問題の可能な解決策を探しています。

私はウェブサイトを構築しており、私は多くの行を持つテーブルを持っています。 私はマテリアライズを使用しています（しかし、それを行うことができる別のプラグインがあれば、私はそれを公開しています）。

マテリアライズでは、これが

var options = [ 
    {selector: '#staggered-test', offset: 50, callback: function(el) { 
    Materialize.toast("This is our ScrollFire Demo!", 1500); 
    } }, 
    {selector: '#staggered-test', offset: 205, callback: function(el) { 
    Materialize.toast("Please continue scrolling!", 1500); 
    } }, 
    {selector: '#staggered-test', offset: 400, callback: function(el) { 
    Materialize.showStaggeredList($(el)); 
    } }, 
    {selector: '#image-test', offset: 500, callback: function(el) { 
    Materialize.fadeInImage($(el)); 
    } } 
]; 
Materialize.scrollFire(options); 

しかし、どのようにテーブルの行の上にそれを実装するために使用しますか？

私は、ほとんどの行を非表示にしたいと思いますが、ユーザーがスクロールしていくほど表示されます。

これは可能ですか？ おかげ

Answer 1

代わりのスクロール私はここで、より利用したJavaScriptとjQueryを表示するボタンが機能です

$.fn.RowReveal = function(RowsToShow, numMore) { 

var numShown = RowsToShow; 
var numMore = numMore; 

var $table = $(this).find('tbody'); 
var numRows = $table.find('tr').length; 

var btn_id = parseInt(Math.random()*1000)+numRows; 

// Hide rows and add clickable div 
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end() 
    .after('<tbody id="more-'+btn_id+'"><tr><td colspan="' + 
     $table.find('tr:first td').length + '"><div>Show More</div></tbody></td></tr>'); 

$('#more-'+btn_id).click(function() { 
    numShown = numShown + numMore; 
    if (numShown >= numRows) { 
     $('#more-'+btn_id).remove(); 
    } 
    if (numRows - numShown < numMore) { 
     $('#more-'+btn_id+' span').html(numRows - numShown); 
    } 
    $table.find('tr:lt(' + numShown + ')').fadeIn(); 
}); 

}

を作りました