Как прокрутить опцию с TR?

Question

У меня есть несколько TR в таблице. Когда я нажимаю TR, затем открываю option-box, теперь я хочу переместить это поле согласно TR position во время прокрутки, как я могу это сделать?

Работает нормально при нажатии, но после прокрутки окна это не движется, как TR

Мой код: -

$('tr').click(function(){
  var editContentmarginTop = $(this).offset().top;
  $('.option-box').show();
   $('.option-box').css({
            'top': editContentmarginTop
        });
});

.main-div{height:2000px;}
.option-box{ display:none;}
.option-box{ background:#ccc; position:fixed; top:0px; left:0px; height:50px; width:50px;}

.table{ margin-left:50px;}

  <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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <div class="main-div">
  
   <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  
  </div>
  <div class="option-box">Add New</div>
  

Answer 1

Изменить position:fixed на position:absolute в .option-box классе

проверить обновленный фрагмент

$('tr').click(function() {
  var editContentmarginTop = $(this).offset().top;
  $('.option-box').show();
  $('.option-box').css({
    'top': editContentmarginTop
  });
});

.main-div {
  height: 2000px;
}

.option-box {
  display: none;
}

.option-box {
  background: #ccc;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50px;
  width: 50px;
}

.table {
  margin-left: 50px;
}

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <div class="main-div">

    <table class="table">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Doe</td>
          <td>john@example.com</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>mary@example.com</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
        </tr>
      </tbody>
    </table>

  </div>
  <div class="option-box">Add New</div>