Question

我有一个function UpdateTableHeaders() { $(".persist-area").each(function() { var el = $(this), offset = el.offset(), scrollTop = $(window).scrollTop(), floatingHeader = $(".floatingHeader", this) if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) { floatingHeader.css({ "visibility": "visible" }); } else { floatingHeader.css({ "visibility": "hidden" }); }; }); } $(function() { var $floatingHeader = $(".persist-header", this).clone(); $floatingHeader.children().width(function(i, val) { return $(".persist-header").children().eq(i).width(); }); $floatingHeader.css("width", $(".persist-header", this).width()).addClass("floatingHeader"); $(".persist-header", this).before($floatingHeader); $(window) .scroll(UpdateTableHeaders) .trigger("scroll"); });的表，有很多行和固定的标题。我从这一方获得的固定标头解决方案：Persistent Headers

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="100%" class="persist-area">
  <tr class="persist-header">
    <th> Entry 1</th>
    <th> Entry 2</th>
  </tr>
  <!-- stuff and stuff -->
</table>

return $(".persist-header").children().eq(i).width();

现在，如果我打开我的页面，一切看起来都很好。即使在滚动后，也会出现新的固定标题。但是，如果我调整页面大小（例如，将窗口大小调整为宽度的一半），则固定标头会保持其原始大小。

我认为问题出在stdin部分。似乎它创建了具有固定像素宽度而不是百分比1的标题。

如何实现具有自动调整宽度的固定标题？

Answer 1

使用：

$(window).on('resize', function(){
      //...
});

然后在那里重新运行标题宽度代码

调整固定表头的大小

1 个答案: