我如何使用粘性将 div 和 table 标题同时固定在页面顶部？

Question

我在 https://jsfiddle.net/kkaiser/4tgL186o/ 上创建了一个 fiddle 来演示这个问题。

<div id="admin" class="besticky">
....content
</div>
<div id="actLog">
<table id="thisNet">
<thead><tr><th  class="besticky"></tr></thead></thead>
<tbody><tr><th></th></tr></tbody>

我想要做的是使用粘性来保持 'admin' div 的位置，并保持页面顶部的三个列标题。正如您在 fiddle 中看到的那样，列标题仍然存在，但 'admin' 部分滚出了页面。我也需要 'admin' 保留，因为页面可能会因 'admin' 栏中的条目而变得很长。我怎样才能获得粘性或一些变体来保持 'admin' 和列头的位置？

Answer 1

我的朋友 Matt 想出了答案，我在这里分享给未来为这个想法苦苦挣扎的程序员。首先将 CSS 更改为 besticky，如下所示；

.besticky { position:sticky; top:40px; }

然后制作

<div id="primeNav" class="flash" style="position:sticky; top:0̷; z-index:1;">

这两个小的改变让整个事情都成功了。

我如何使用粘性将 div 和 table 标题同时固定在页面顶部？

How do I use sticky to hold both a div and a table head to the top of a page?

css

sticky