火狐浏览器中position: sticky无效

Question

据说在Firefox中position:sticky可以使用，但我没有看到我的侧边栏粘住。

我的HTML代码如下：

<div class="wrap">

    <div class="sticky">side </div>    
    <div class="content">content <div>
<div>

我的CSS：

.content{
    height: 2000px;
    overflow: hidden;
}

.sticky{
    position: sticky;
    width: 200px;
    float: left;
}

当我向下滚动时，侧边栏会随着内容一起滚动，而不是固定在原位。有人知道可能是什么问题吗？

- Elfy

---

火狐浏览器的版本是多少？ - Justinas

我有最新版本。 - Elfy

截至2018年2月，th的position: sticky在FF 58.0 (64-bit)中仍然无法正常工作。落后了三年！ - Green

是的，在 Firefox、Chrome、Opera 和可能更多的浏览器中，它仍然无法在 thead 和 tr 元素上工作。 - willy wonka

Answer 1

我在2020年遇到了同样的问题 - 这篇文章是谷歌搜索结果的首选，但是没有一个答案能够帮助我。

实际问题是sticky定位不适用于父元素设置了display: flex属性。

参考资料：
- position: sticky, works in Chrome but not in Firefox
- https://bugzilla.mozilla.org/show_bug.cgi?id=1488080

- de.

---

我很失望这个bug还没有被修复。我猜它的优先级不高，但它会破坏我的应用在Firefox中的布局。 - Chunky Chunk

在 display:grid 元素中出现相同问题。在 Chrome 上完美运行，在 Firefox 中向右滚动直到页脚，然后在向上滚动时无法固定 :( - LaZza

@LaZza 使用 display:block 属性来设置粘性元素，帮助我解决了同样的问题。 - Viktor Brešan

Answer 2

如果指定了top值，它就会固定在那里:

.sticky{
   position: -webkit-sticky; /* for safari */
   position: sticky;
   width: 200px;
   float: left;
   top: 10px;
}

fiddle

- nice ass

---

当您将粘性物品放在其他物品下方时，这种方法无法起作用：https://jsfiddle.net/3qoe0wd0/44/。我正在使用 Firefox 50.1.0。 - Chris Smith

@ChrisSmith 在你的fiddle中，HTML标记已经损坏了。这很可能是一个问题。内容类上的div标签没有关闭。 - ADJenks

Answer 3

如果父元素设置为overflow: hidden，则position: sticky也无法正常工作，因为它无法正确计算高度。

- roroland

---

它也无法与overflow-x: hidden一起使用。因此，任何溢出（例如overflow，overflow-y，overflow-x）都会使粘性功能出现故障。 - Mykel

Answer 4

我能够通过使用"display: table-cell"来解决它。

我的问题涉及thead在Chrome中使用display: block或inline-block解决了，但在Firefox上无法固定。

- Cynicus Rex

Answer 5

position: sticky 不适用于表格元素，如 tr 以及其他一些元素。

解决方法是将想要实现粘性效果的内容包裹在一个 span 元素中。

    <style>.sticky span {position: -webkit-sticky; position: sticky; top: 0;}</style> 
    <td class='sticky' valign='top' width='200'>
    <span>
        (table contents)
    </span>
    </td>

相关答案和解决方案

- ioi-xd

Answer 6

我找到了一种非常简单但有效的替代方法。

position:fixed;
width:100%;
top:0;
z-index:1; /*depends on your elements*/

适用于所有浏览器，没有任何问题。如果您的顶部导航栏有很多元素，则粘性将无法正常工作，我认为这是由于一些overflow:hidden;引起的。

- hhelsinki

Answer 7

刚刚偶然发现这个问题，似乎在2022年仍然存在。我将在此留下我所拥有的内容，以便能够清晰地复制原始帖子，并添加一些缓解措施。

div {
  position: sticky;
- display: inline;
+ display: block;
+ height: 100px;
  z-index: 2;
  top: 0;
}

- S. Esteves

Answer 8

我曾经遇到同样的问题，即使我设置了一个顶部值，粘性元素也无法固定。解决方法是同时为高度设置一个值...

- user316264

Answer 9

对于仍然遇到这个问题的人：

Firefox使用父级显示作为渲染条件。

因此，请尝试使子元素display: inline，并将父元素display: inline。

请记住，您仍然需要检查所有浏览器的父元素位置和大小。Sticky很好，但它非常特定于用例。

- Bruno Bee Nahorny

Answer 10

在我的情况下，粘性元素采用了 display: table; 属性，当我将其更改为 display: block; 时，在 Firefox 中就可以固定粘性了。因此，在考虑其他修复方法之前，请查看显示属性。

- Weam Adel