做一个随着滚动条滚动显示的浮动的表头

js

     $(window).scroll(function(){
    var this_scrollTop = $(this).scrollTop();
        // その他画面
        if($("#search-list").offset().top - this_scrollTop  < 10){
    $("#newTable").show();
    }else{
    $("#newTable").hide();
    }

    });

css

    <style type="text/css">
#newTable {
position: fixed;
z-index: 1;
margin-right:24px;
margin-top:-7px;
}
#newTable table {
table-layout:fixed;
border-collapse: separate !important;
border-bottom-style: hidden;
}
#newTable table tr {
background-color: white;
}
#newTable table th {
border-bottom-width: 3px !important;
}

</style>

jsp

    <div class="dataTable_wrapper"id="newTable" style="display:none;">
<table class="table table-striped table-bordered table-hover serch-result"
style="text-align: left; margin-top: 4px !important; table-layout: fixed;">
<thead>
<tr>
<th style="display: none;"></th>
<th class="text-center" style="width:8%; vertical-align: middle;">セット<br>番号</th>
<th class="text-center" style="width:8%; vertical-align: middle;">記号</th>
<th class="text-center" style="width:8%; vertical-align: middle;">グループ<br>記号</th>
<th class="text-center" style="width:16%; vertical-align: middle;">図書名称</th>
<th class="text-center" style="width:7%; vertical-align: middle;">数量</th>
<th class="text-center" style="width:15%; vertical-align: middle;">保管事業所</th>
<th class="text-center" style="width:15%; vertical-align: middle;">保管場所</th>
<th class="text-center" style="width:15%; vertical-align: middle;">備考</th>
<th style="display: none;"></th>
<th class="text-center" style="width:8%; vertical-align: middle;">電気・機械<br>区分</th>
<th style="display: none;"></th>
</tr>
</thead>
</table>
</div>

    

猜你喜欢

转载自blog.csdn.net/qq1212qqpp/article/details/79884138