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

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

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

这里有两个答案:

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

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

粘滞元素的真实行为是:

首先，在一段时间内它是相对的 然后它会被修复一段时间 最后，它从视图中消失了

固定定位的元素被视为相对定位，直到它的包含块在其流根(或它滚动的容器)内越过指定的阈值(例如将top设置为非auto的值)，此时它被视为“卡住”，直到遇到其包含块的对边。

元素根据文档的正常流定位，然后根据顶部、右侧、底部和左侧的值相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移，包括与表相关的元素。偏移量不会影响任何其他元素的位置。

这个值总是创建一个新的堆叠上下文。请注意，粘滞元素“粘滞”到具有“滚动机制”的最近的祖先上(当overflow被隐藏、滚动、自动或覆盖时创建)，即使该祖先不是最近的实际滚动祖先。

这个例子将帮助你理解:

代码https://codepen.io/darylljann/pen/PpjwPM

从我的评论来看:

位置:粘需要一个坐标来确定粘的位置

nav { position: sticky; top: 0; } .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; } body { height: 200vh; } <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>

除了FF和Chrome，其他浏览器也可以使用polyfill。这是一个实验性的规则，可以通过浏览器随时实现，也可以不实现。Chrome在几年前添加了它，然后删除了它，它似乎回来了…但能持续多久呢?

最接近的是position:relative +坐标，当滚动到达粘性点时更新，如果你想将其转换为javascript脚本

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

在你的例子中，你必须通过使用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>