将元素固定到顶部

Question

我有一个固定在顶部 x、y 轴的元素。有什么方法可以将其更改为仅固定到 x 轴吗？例如。 - 这样我就可以将固定元素向左和向右滚动。

当前代码：

<div style="position:fixed;top:0;width:2000px;">
The fixed header element
</div>
<div style="overflow:auto;width:2000px;">
the scrollable content element
</div>

Answer 1

这是一个很棒的问题，CSS3 没有给你答案。没有办法将元素固定在一个轴上而不固定在另一个轴上。

在我看来，理想的解决方案是提供CSS3属性，例如position:fixed-x和position:fixed-y。但没有这样的事。

据我所知，实现这种非常有用的行为的唯一方法是编写 JavaScript 函数来处理 setInterval() 事件；在每个事件中轮询当前的 X 或 Y 滚动位置；并且，如果要修复的轴上的滚动位置发生了变化，则更改固定元素的滚动位置进行补偿，即将其移回其所属位置。

这个方法我确实用过，也有效，但是很痛苦。我的代码每隔十分之一秒轮询一次 X 和 Y 滚动位置，这通常足以避免看起来太不稳定。

您可以在这张长桌子中看到工作中的解决方案。缩小窗口，出现水平滚动条，左右滚动表格。列头随表格移动，但您可以垂直滚动表格主体，而列头保持不动。

Answer 2

要将其设置为仅对 x 或 y 固定，您需要将 Sticky 放在绝对值中

.main{
  height: 300px;
  width: 300px;
  position: relative;
  overflow: auto;
}

.scroll{
  height: 800px;
  width: 800px;
  background-color: lightblue;
}


.scroll-y {
  height: 100px;
  width: 800px;
  position: absolute;
  display: flex;
}

.not-scroll-x {
  height: 50px;
  width: 50px;
  position: sticky;
  left: 50px;
  background-color: blue;
}


.scroll-x {
  height: 800px;
  width: 100px;
  position: absolute;
  display: flex;
}

.not-scroll-y {
  height: 50px;
  width: 50px;
  position: sticky;
  top: 0;
  background-color: red;
}

<div class='main'>
  <div class='scroll'>
      <div class='scroll-y'>
          <div class='not-scroll-x'>
          </div>
      </div>
      <div class='scroll-x'>
          <div class='not-scroll-y'>
          </div>
      </div>
  </div>
</div>