有角度的:桌面上有粘性的东西



我正在处理一个中型项目,我们需要在一个复杂的表中显示一些信息。页眉需要粘性,这样当向下滚动页面时,页眉就会粘在表格的顶部。

由于我想支持IE和早期版本的Chrome,我不想使用position: sticky;。我不介意它涉及一点JS,因为我之前的尝试也包括了这一点。

我已经走了一条路,简单地通过JS实现这一点,并在用户进一步向下滚动表标题时生成position: fixed;。然而,这似乎也有同样的问题,如下面的stackblitz所示。这让我考虑到它的尺寸可能有问题,我做得不对。

我已经研究了一些角度粘性物质的使用。我只想知道如何在给定的上下文中使用这个库:

我有一个Stacklitz的例子使用。

如果有人能给我一个提示,告诉我这到底是怎么做的,我会很高兴的。

我希望整个thead向下移动,而不缩放自身或缩放表的其余部分!

我用display:inherit添加了第一行CSS,以更接近您想要的内容。。。width属性用于匹配粘性标头和表的其余部分之间的宽度。。。

thead.is-sticky{display:inherit;width:calc(100vw - 35px)!important;}

剩下的唯一限制就是表格的限制。例如,如果标题太大,它会打乱较小屏幕上的外观,所以我们打断这个词,因此第二行CSS:

th, tr{word-break: break-word;}

我在这里用这些变化分叉了你的堆栈

最新更新