使用这个博客(https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working)中的策略，我为那些无法控制页面中所有组件的人提供了一个选项

我使用的是Angular，在ngOnInit方法中，我运行这段代码来将父类的可见属性更改为可见

/**
 * position: sticky
 * only works if all parent components are visibile
 */
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
  const hasOverflow = getComputedStyle(parent).overflow;
  if (hasOverflow !== 'visible') {
    parent.style.overflow = 'visible';
    // console.log(hasOverflow, parent);
  }
  parent = parent.parentElement;
}

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

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

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

如果你的父母正在使用显示伸缩，粘滞位置将不起作用。当我在一个溶液中读到这个

由于flex box元素默认为拉伸，因此所有元素的高度都相同，不能滚动。

如果你使用display: flex;在父元素上，你必须添加这个到sticky元素align-self: flex-start;同时设置height为auto height: auto;

这就是sticky元素类的样子

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

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

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

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

关于位置粘性最常见的错误之一是:

浏览器不支持 不包括任何上、下、右、左属性。请记住，如果您没有提供足够的信息，浏览器将不知道如何正确处理这些信息。如果没有它，它将是静态定位的。

在这篇文章中，我已经写过这方面的内容。只是做个参考，这样我就不会重复太多了。