顺晟科技：

单纯的CSS和HTML是不够的。您需要javascript来实现您的目标。

更具体地说，您应该使用交集观察者。使用它，您可以根据元素的可见性更改css或添加/删除类。例如，如果用户向下滚动到某个点，表头不再可见，则可以触发操作。或者当表头仅从50%或更少可见时。你明白了。

如果您从未使用过交叉观察器，youtube可能是了解其工作原理的良好开端。

另一种选择是手动计算所有内容。这样，您需要定义用户需要滚动多远（多少像素）才能启动操作。 代码如下所示:

* {
color: #ffffff
}

section 
{
  height: 200px;
}

section .table-wrapper {
  background-color: #202020;
  padding: 0;
}

section .row {
  margin-left: 0;
  margin-right: 0;
  height: 100%;
}

section .row>* {
  padding-left: 0;
  padding-right: 0;
}


/* Content above table */
.table-header {
  padding: .75rem .5rem;
}

.table-header .btn-container .add-btn {
  border: none;
  outline: none;
  background-color: #002088;
  border-radius: 4px;
  font-size: 14px;
  color: #EEEEEE;
  padding: .55rem .75rem;
}

.table-header .btn-container .add-btn span {
  margin-right: .5rem;
}


/* Table */

table {
  width: 100%;
  height: 100%;
}

table thead {
  background-color: #605079;
  padding: .5rem;
}

// Table header
table thead tr th {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .65px;
  color: #ffffff;
  line-height: 40px;
  padding: 0 .5rem;
}

table thead th {
  border-bottom: 0px transparent;
}

table tbody tr {
  background-color: #505050;
  border-bottom-width: 1px;
  border-bottom-color: #3b4253;
}

table tbody tr td {
  font-size: 14px;
  color: var(--nav-text);
  font-weight: 400;
  line-height: 35px;
  padding: .5rem .5rem;
}

table tbody tr td:nth-of-type(1),
table thead tr th:nth-of-type(1) {
  padding-left: 30px;
}

select {
  color: #000000;
}

option {
  color: #000000;
}

此方法的一个非常基本的示例