Home » Jquery » javascript – How to scroll option-box with TR?-Exceptionshub

javascript – How to scroll option-box with TR?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have few TR in table, When i click on TR then open a option-box now i want to move this box as per TR position while scrolling, how can i do this?

Its working fine on click but after window scroll this is not moving as per TR

My Code:-

$('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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  
  </div>
  <div class="option-box">Add New</div>
  
How to&Answer:

Change position:fixed to position:absolute in .option-box class

check the updated snippet

$('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>[email protected]</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Moe</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>

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