时间戳

首页 > 解决方案 > 如何让标题和左列在页面滚动时粘在一起

javascript - 如何让标题和左列在页面滚动时粘在一起

问题描述

好的，我已经广泛搜索了网络，但还没有找到我的问题的答案。我发现有几个接近但没有一个以我希望它的方式工作。

首先是一些简单的基本规则。

我不是在寻找需要 Div 内容启用溢出设置的解决方案。虽然该解决方案有几个stackoverflow页面，但它并没有提供我需要的东西，因为我所做的只是让我的页面有两个滚动条.....一个在div上，一个在页面上......我的工作将提供负面的用户体验。

如果它成为必须，那么 JavaScript 解决方案可能会起作用，但希望有一个纯 CSS 解决方案。

我正在使用，或者至少尝试使用带有现代“位置：粘性”的纯 CSS；特征，

这似乎非常简单直接，并且在大多数情况下按预期工作......除了一个小例外。

如果我只用这个

th {
  position: -webkit-sticky;  /* Safari */
  position: sticky;
  top: 0;
}

一旦到达页面顶部，它将冻结整个标题行。

如果我只这样做

th:first-child,
td:first-child {
  position: -webkit-sticky;  /* Safari */
  position: sticky;
  left: 0;
  z-index: 10;
}

它将在滚动时冻结左侧的第一个 TD 列和第一个 TH 列。

到目前为止，无论哪种情况，它都按预期工作。但是，如果我同时使用它们，我只会得到部分行为。

在这种情况下，左列（TD 和 TH）将按预期向左冻结，但 TH 将冻结在所有 TH 的顶​​部，但现在滚动的第一列 TH 除外。

我制作了一个jsFiddle 示例）来显示当前行为。我要做的是根据页面滚动将第一个 TH 锁定到顶部或左侧。

标签： javascriptcss

解决方案

好的，从这个问题上休息了几天，最后决定再试一次。经过一些额外的调整后，我终于能够让它与纯 CSS 一起工作，并且不需要启用 javaScript 或 DIV 溢出。

用解决方案更新了 jsFiddle

我能够将我的 CSS 调整为以下内容，这可以正确冻结左侧和标题。

tr:nth-child(1)  th:nth-child(1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    top: 0;
}

tr:nth-child(2)  th:nth-child(1n+1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    top: 0;
}

tr:nth-child(2)  th:nth-child(1) {
    left: 0;
    z-index: 10;
}

tr:nth-child(1n+1) td:nth-child(1) {
    position: -webkit-sticky;   /* Safari */
    position: sticky;
    left: 0;
}

推荐阅读