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

尽管阅读了整个页面，尝试了所有的方法，但在我的移动设备上，这就是不能工作。没有任何棘手的操作——这是我唯一需要它发挥作用的地方。我已经排除了任何特殊的名称或覆盖，将阻止它在这个屏幕宽度的功能。清除我的移动格式化代码作为测试，没有看到任何变化。在我笔记本电脑上的Chrome浏览器上运行得很好，但在我的新S10上的Chrome浏览器上就完全不行。

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

由于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;
}

如果parent有float:属性，它就不起作用。

如果danday74的修复不起作用，检查父元素是否有一个高度。

在我的情况下，我有两个孩子，一个漂浮在左边，一个漂浮在右边。 我想要右边的浮动一个变得粘性，但必须添加一个<div style="clear: both;"></div>在父元素的末尾，赋予它高度。

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