我也有同样的问题。对我来说，问题在于大屏幕上的显示:“none”(media-query)和智能手机上的显示:“initial”。如果我删除了display css属性，并在桌面上添加了不透明度和指针事件，一切都解决了。

这是MarsAndBack和Miftah Mizwar回答的延续。

他们的答案是正确的。但是，很难确定问题的始祖。

简单来说，只需在浏览器控制台中运行这个jQuery脚本，它就会告诉您每个祖先上overflow属性的值。

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

如果一个祖先没有溢出:可见改变它的CSS使它有!

同样，正如在其他地方所述，确保你的sticky元素在CSS中有这个:

.your-sticky-element {
    position: sticky;
    top: 0;
}

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

我知道太晚了。但我发现了一个解决方案，即使你使用溢出或显示:flex在父元素粘性将工作。

步骤:

为你想要设置粘性的元素创建一个父元素(确保创建的元素是相对于主体或全宽和全高的父元素)。 向父元素添加以下样式: ｛ 位置:绝对的; 身高:100 vmax; ｝ 对于粘滞元素，请确保添加的z-index高于页面中的所有元素。

就是这样!现在它必须起作用。问候

另一个position: sticky不能工作的常见场景是，如果它的父类有display: flex或display: grid。

在这种情况下发生的是粘性位置在工作，但你看不到它，因为元素被完全拉伸了。尝试使用align-self: baseline降低它的高度，你会看到效果。

溢出需要被移除或设置为initial来创建位置，这是TRUE: sticky作用于子元素。我在我的Angular应用中使用了材质设计，发现一些材质组件改变了溢出值。我的解决方案是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}