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

最新推荐文章于 2025-07-26 10:18:16 发布

原创最新推荐文章于 2025-07-26 10:18:16 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的滚动监听功能，当滚动条接近特定元素时显示一个固定位置的表格。通过jQuery简化DOM操作，并配合CSS进行样式设置。

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

});

css

</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>