Question

我有一个看起来像这样的表：

<table id="navbar"  border="1" style="background-color:navy;height:150px;position:sticky;top:0px;right:0px;left:0px;border-style: solid;border-color:black;max-width:999999px; width:100%; background-image: none;">

所有表格的样式：

table{
            text-align:center;
            width:30%;
            left:25%;

            /*font-size:larger;*/
        }

粘贴位置应该使它保持位置，以便表格始终保持在屏幕顶部，即使在水平滚动时也是如此。但它不起作用。我发现它起作用的唯一方法是在上面添加另一个表，并同时给它们提供display：inline-table属性，但这不是我正在寻找的解决方案。有人知道为什么它不起作用的原因吗？

编辑-我需要使用position：sticky。它完全适用于垂直滚动，但不适用于水平滚动。那是我需要解决的问题

Answer 1

使用固定位置：

<table id="navbar"  border="1" style="background-color:navy;height:150px;position:fixed;top:0px;right:0px;left:0px;border-style: solid;border-color:black;max-width:999999px; width:100%; background-image: none;">

位置：固定始终将元素固定在其滚动容器或视口内的某个位置。无论您如何滚动其容器，它都将保持在相同的位置，并且不会影响容器中其他元素的流动。

位置：粘性基本上类似于位置：相对，直到元素滚动到特定偏移量为止，在这种情况下，它变为位置：固定，导致元素“粘”在其位置上滚动到视线之外。

Answer 2

抱歉，@Erel 花了这么长时间才回复你。

因此，如果您只需要代码，就不必阅读我的散文，我将从演示开始：https://codepen.io/NerdyDeeds/pen/oNYVLpB

这里有几件事需要注意，对于您所追求的行为：

很像整个 height:100% 事情，要使其发挥作用，测量需要一直到 :root。也就是说，每个 DOM 节点层次结构都需要知道其边界框的实际限制（别担心：下面会变得更清楚）。
当一个对象被放置在粘性位置时，它基本上有两组坐标限制：视口的坐标限制和其父对象的坐标限制。如果父元素为 500px 宽，并且您向右滚动 1500px 屏幕外，粘性元素将停在其父元素的边缘，而不是继续标记。这将我们带到了最重要的方面：
<body> 标签只是另一个块级容器对象，只是它获得了一个隐式的 min-width:100vw; min-height:100vh。也就是说，如果需要水平滚动的它的孩子之一是 250vw 宽，它将扩展以包含该元素，但它的度量 width 保持不变;孩子们仍然认为爸爸只有100vw 宽。同样，您是否明确告诉它的“实际”宽度实际上只有 100vw，它也会在滚动时滑出屏幕，带着它的粘性孩子（不是他们所有人吗？）

同样的事情适用于您的粘性元素的所有祖先容器。它们不会自动获取 min-width，因此您需要向他们要占据整个空间。如果您希望动态完成，您需要向 <body> 解释，以便他们可以继承页面的“真实”100%。如果任何祖先在其运动或尺寸方面受到限制，那么无论是否具有粘性，都会一直向下链到您的元素。

我发现解决这个问题的最简单方法是简单地添加：

    body {
        width: max-content;
    }

...给你的 CSS。这告诉身体“你实际上和你最宽的内容一样宽......传递它！” CSS 的“级联”部分将保持并携带它们一直测量到您的粘性元素，前提是它和主体本身之间的任何父节点都不受约束（就像您设置width:100vw 在某处。100% 可以正常工作，但同样：前提是它的祖先都不是较小的）。

查看随附的 CodePen。我尽量让它不言自明。

再说一遍：抱歉没有人早点回复你。这是一种令人沮丧的感觉，很臭。我希望你已经找到了你的解决方案，但如果没有，这可能会帮助谁来谷歌搜索。希望这有帮助。

位置：水平滚动上的粘滞不起作用

2 个答案: