我也有同样的问题，我在这里找到了答案。

如果你的元素没有像预期的那样粘在一起，首先要检查应用到容器上的规则。

具体来说，查找元素的任何父元素上设置的溢出属性。不能在position: sticky元素的父元素上使用:overflow: hidden、overflow: scroll或overflow: auto。

我不得不使用下面的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

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

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

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

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

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

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

粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。 .．. 您必须指定一个阈值，其中至少有一个是上、右、下或左，以便粘滞定位按预期的方式工作。否则，它将与相对定位难以区分。 (来源:中数)

在你的例子中，你必须通过使用top属性来定义它最后应该停留的位置。

html, body { height: 200%; } nav { position: sticky; position: -webkit-sticky; top: 0; /* required */ } .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato", sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover { transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } <nav> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav>

我知道这是一个老帖子。但如果有人像我一样，最近才开始摆弄位置:粘性，这可能是有用的。

在我的例子中，我使用position: sticky作为网格项。它没有工作，问题是一个溢出x:隐藏在html元素。只要我删除了该属性，它就工作得很好。有溢出x:隐藏在身体元素似乎工作，但不知道为什么。