问如何使用TR滚动option-box？
EN

Stack Overflow用户

提问于 2020-02-14 10:25:38

回答 1查看 26关注 0票数 0

我在表格中有几个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>

css

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2020-02-14 10:40:37

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