html部分
<div class="modal inmodal" id="alarmModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 80%">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<div class="close" data-dismiss="modal">
<img src="/static/manager/img/new/close.png" alt="">
</div>
<h4 class="modal-title">详情</h4>
</div>
<div class="modal-body" style="height: 400px;overflow: auto;">
<table class="table table-bordered historyInfoList" id="mytable" style="display: none">
<thead>
<tr>
<th class="col-sm-1">通电电位(V)</th>
<th class="col-sm-1">断电电位(V)</th>
<th class="col-sm-1">交流电压(V)</th>
<th class="col-sm-1">直流电压(V)</th>
<th class="col-sm-1">直流电流(mA)</th>
<th class="col-sm-1">自然电位(V)</th>
<th class="col-sm-1">电池电压(V)</th>
<th class="col-sm-2">上报时间</th>
</tr>
</thead>
</table>
<table class="table table-bordered historyInfoList">
<thead id="datatable">
<tr>
<th class="col-sm-1">通电电位(V)</th>
<th class="col-sm-1">断电电位(V)</th>
<th class="col-sm-1">交流电压(V)</th>
<th class="col-sm-1">直流电压(V)</th>
<th class="col-sm-1">直流电流(mA)</th>
<th class="col-sm-1">自然电位(V)</th>
<th class="col-sm-1">电池电压(V)</th>
<th class="col-sm-2">上报时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
注:重点在表格部分
jq部分:
<script type="text/javascript">
$(function(){
//根据滚动窗体和父窗体top距离进行判断是否冻结表头
$(".modal-body").scroll(function(event){
let top = $("#datatable").position().top;
if(top<=0){
$("#mytable").css({"display": "","position": "fixed","top":"65px","width": "calc(100% - 65px)"});
}else{
$("#mytable").css({"display": "none"});
}
});
});
</script>