html Tabellenzeile markiert auf Scroll-Ereignis

Question

CSS-Code

table { 
     width: 100%; 
} 

.highlight { 
     background: red; 
} 

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

HTML-Code

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

Skript var up = 0; Funktion 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); 

Ziel: auf Rolle auf nach bestimmten Top-Position meine zugehörige Zeile sollte hervorgehoben werden

Schwierigkeit: jetzt bin ich mit hart codierten Wert und überprüfen Wert dann tun bezogenen Zeile markiert Sie können siehe oben Code, wo ich hart codierte überprüfen, wenn ich mehrere Zeilen haben, dann habe ich viel Bedingung

Jeder kann dieses Problem zu optimieren.

Answer 1

Sie können die Position Ihrer <tr> mit der Methode erhalten.

Get the position of a div/span tag

und Sie können die Höhe Ihres <tr> durch das Verfahren unter

Get div height with plain JavaScript

Wenn beide OK bekommen, dann können Sie Ihren Zustand jetzt ändern.