这是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;
}

检查祖先元素是否有溢出集(例如overflow:hidden);试着切换它。您可能需要检查DOM树的位置高于您的预期=)。

这可能会影响你的位置:粘在一个后代元素上。

似乎导航栏被粘不应该在任何div或部分与其他内容。没有一个解决方案是为我工作，直到我把导航栏从div，导航栏与另一个topbar共享。我以前有topbar和导航栏包装一个共同的div。

用于位置:粘;要工作，你的sticky元素应该放在body标签的右边，作为一个直接的子元素 不应该有任何包装divs或类似的东西。 因为它只能在到达父元素的底部之前保持固定。 你应该指定它应该粘在哪里，比如:top: 0;

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

我知道这个问题似乎已经有了答案，但我遇到了一个具体的案例，我觉得大多数答案都没有抓住重点。

溢出:隐藏答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

但是粘性行为最好在容器高度内使用。想象一下，在你网站的右栏中，有一个新闻简报的形式，它可以随着页面向下滚动。 如果sticky元素是容器的唯一子元素，那么容器的大小是完全相同的，并且没有滚动的空间。

你的容器需要是你期望元素滚动的高度。在右列的情况下就是左列的高度。 实现这一点的最佳方法是在列上使用display:table-cell。如果你不能，并且像我一样被float:right困住了，你必须要么猜左列的高度，要么用Javascript计算它。