如何使用TR滚动option-box？
如何使用TR滚动option-box？
提问于 2020-02-14 18:25:38
我在表格中有几个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>
回答 1
Stack Overflow用户
发布于 2020-02-14 18: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60224454
复制相关文章
相似问题
腾讯云开发者
