Question

位置：据说粘性在firefox中工作，但我没有看到我的侧边栏。

我的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;
}

当我向下滚动侧边栏时，滚动内容。它不坚持。任何人都知道可能是什么问题？

Answer 1

如果您指定top值，则会粘：

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

fiddle

Answer 2

我在2020年遇到同样的问题-这篇文章首先在google中弹出，但没有答案对我有帮助。

实际的问题是，粘性元素在父元素显示为 flex 时不能很好地发挥作用。

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

Answer 3

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>

Related answers and solutions

Answer 4

我遇到了同样的问题，即使我设置了最高值，粘性元素也不会粘住。解决的办法是也为高度设置一个值...

Answer 5

如果父元素设置为溢出，则位置粘滞也将不起作用：隐藏，因为它无法正确计算高度。

Answer 6

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1020;
    top: 86px;
    height: min-content;
}

添加高度：最小值； 修复了我在Firefox上的问题

Answer 7

我能够使用'display：table-cell'来修复它。

我的问题涉及一个主题，当我通过使用display：block或inline-block在Chrome中修复了相同的问题后，就不想再在Firefox上坚持使用该广告了。

Answer 8

对于仍然遇到此问题的任何人：

Firefox使用父显示作为呈现条件

因此，请尝试使孩子display: inline和父母display: inline

请记住，您仍然需要检查所有浏览器的父位置和大小。粘性很好，但是非常适合特定情况。

Answer 9

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

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

适用于所有浏览器，没有牛市。如果您的 topnav 有很多元素，粘性将不起作用，我相信这是因为某些 overflow:hidden;

位置：粘在Firefox中不起作用

9 个答案: