HTML строка таблицы выделена на событии прокрутки

Question

CSS код

table { 
     width: 100%; 
} 

.highlight { 
     background: red; 
} 

.area { 
    position: relative; 
    height: 400px; 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

HTML код

<div class="area"> 
<table border="1"> 
      <tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr> 

<tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr><tr> 
       <td>test 1</td> 
       <td>test 2</td> 
       <td>test 3</td> 
       <td>test 4</td> 
       <td>test 5</td>    
      </tr> 

</table 
</div> 

скрипт вар вверх = 0; функция upAndDownHighlight() { var top = $ (this) .scrollTop();

if (top > 30 && top < 60) { 
    $("table").find("tr").eq(1).addClass("highlight"); 
    } else if(top > 60 && top < 90) { 
    $("table").find("tr").eq(1).addClass("highlight"); 
    } 
    : 
    : 
    : 


    if (top < up) { 
     $("table").find("tr").removeClass("highlight"); 
    } 

    up = top; 
} 

$(".area").on("scroll", upAndDownHighlight); 

Цель: на свитке на после определенного верхнего положения следует выделить мой родственный ряд

Сложность: сейчас я использую трудно закодированное значение и проверьте значение, то делать связанные строки выделены вы можете см. выше код, где у меня есть жестко закодированная проверка, когда у меня есть таблица с несколькими строками, тогда у меня есть условие состояния

Любой знает, как оптимизировать эту проблему.

Answer 1

Вы можете получить информацию о вашем <tr> способом.

Get the position of a div/span tag

и вы можете получить высоту вашего <tr> методом ниже

Get div height with plain JavaScript

Если исправны, то вы можете изменить свое состояние в настоящее время.