javascript - 如何使用 TR 滚动选项框？

Question

我的表格中有几个TR，当我点击TR然后打开一个选项框时，我想将此框移动为滚动时每个 TR 位置，我该怎么做？

点击时工作正常，但在窗口滚动后，它不会按照 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

将 .option-box 类中的 position:fixed 更改为 position:absolute

检查更新的代码片段

$('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>