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>