这是什么绊倒了我…我的粘性div是在另一个div，所以父div需要一些额外的内容后粘性div，使父div“足够高”的粘性div，以“滑过”其他内容，因为你向下滚动。

所以在我的情况下，在黏黏的div之后，我必须添加:

    %div{style:"height:600px;"} 
       

(我的应用程序有两个并排的div，左边是一个“高”图像，右边是一个短的数据输入表单，我希望当你向下滚动时，数据输入表单漂浮在图像旁边，这样表单就总是在屏幕上。它不会工作，直到我添加了上面的“额外内容”，这样粘性div就有东西可以“滑动”

注意空网格区域!

在我的例子中，我有这样的东西:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望当用户完成结帐表单时，总结网格项具有粘性。它没有工作，因为那些空的网格项(用。标记)。

解决方案是删除这些空项，如下所示:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

如果parent有float:属性，它就不起作用。

有趣的时刻，我不明显:至少在Chrome 70的位置:粘是不适用的，如果你已经使用DevTools设置。

这里有两个答案:

从正文标签中移除溢出属性 设定高度:100%到机身以解决溢出问题y:自动

Min-height: 100%不工作，而不是高度:100%

我不得不使用下面的CSS来让它工作:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

如果以上都不管用，那么……

遍历所有祖先元素，确保这些元素都没有overflow: hidden。您必须将此更改为overflow: visible