使用这个博客(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;
}

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

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

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

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

我相信这篇文章说了很多关于粘性的工作原理

How CSS Position Sticky Really Works! CSS position sticky has two main parts, sticky item & sticky container. Sticky Item — is the element that we defined with the position: sticky styles. The element will float when the viewport position matches the position definition, for example: top: 0px . Sticky Container —is the HTML element which wraps the sticky item. This is the maximum area that the sticky item can float in. When you define an element with position: sticky you’re automatically defining the parent element as a sticky container!

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

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

粘滞元素的真实行为是:

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

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

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

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

这个例子将帮助你理解:

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