I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue?
$(function() {
$('tr').click(function() {
offsetTop = $(this).offset().top;
console.log(offsetTop);
});
});.myDiv {
overflow-y: auto;
height: 250px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="myDiv">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650f0a0d0b25001d04081509004b060a08">[email protected]</a></td>
</tr>
...
<tr>
<td>July 10</td>
<td>Dooley</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f399869f8ab3968b929e839f96dd909c9e">[email protected]</a></td>
</tr>
</tbody>
</table>
</div>