我正在处理一个表(垂直滚动(，在那里我必须打开一个点击弹出事件。但当我向上滚动表格时，popover仍然在同一位置。我希望popover可以与相应的元素一起向上或向下滚动。
https://codepen.io/LAXMI1991/pen/jOPrrpj
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});.fixed_header {
width: 100%;
}
.fixed_header tbody {
display: block;
overflow: auto;
height: 200px;
width: 100%;
}
.fixed_header thead tr {
display: block;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="fixed_header">
<table class="table ">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">...</a></th>
</tr>
</tbody>
</table>
</div>
</div>这只是解决问题的简单方法，但在复杂的编程中不起作用。只需给你的(…(元素一个id或其他东西来切换popover.你需要一个好的CSS练习。
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
var $element = $('[data-toggle="popover"]');
$(window).scroll(function() {
if($(this).scrollTop() > 0) {
$element.fadeOut(1000);
} else {
$element.fadeIn(1000);
}
});
$('a').click(function(){
$('.popover').css({position: 'sticky'});
});
});.fixed_header
{
width:100%;
}
.fixed_header tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}
.fixed_header thead tr{
display:block;
}
/* .popover-body {
height: 50px;
overflow-y: auto;
white-space:pre-wrap;
} */<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="fixed_header">
<table class="table ">
<thead>
<tr>
<th>Firstname</th>
<th >Lastname</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<th><a href="#" data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>