溢出需要被移除或设置为initial来创建位置，这是TRUE: sticky作用于子元素。我在我的Angular应用中使用了材质设计，发现一些材质组件改变了溢出值。我的解决方案是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}

我还遇到了一些事情:

当你的sticky元素是一个组件时(angular等)

如果“sticky”元素本身是一个带有自定义元素选择器的组件，比如一个名为<app-menu-bar>的angular组件，你需要在该组件的css中添加以下内容: :主机{显示:块;} //或使用flexbox

or

    app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require `display:block` even on the root element `app-root` of an angular application or it won't stick.

If you are creating a component and defining the css inside the component (shadow DOM / encapsulated styles), make sure the position: sticky is being applied to the 'outer' selector (eg. app-menu-bar in devtools should show the sticky position) and not a top level div within the component. With Angular, this can be achieved with the :host selector in the css for your component. :host { position: sticky; display: block; // this is the same as shown above top: 0; background: red; }

其他

If the element following your sticky element has a solid background, you must add the following to stop it from sliding underneath: .sticky-element { z-index: 100; } .parent-of-sticky-element { position: relative; } Your sticky element must be before your content if using top and after it if using bottom. There are complications when using overflow: hidden on your wrapper element – in general it will kill the sticky element inside. Better explained in this question Mobile browsers may disable sticky/fixed positioned items when the onscreen keyboard is visible. I'm not sure of the exact rules (does anybody ever know) but when the keyboard is visible you're looking at a sort of 'window' into the window and you won't easily be able to get things to stick to the actual visible top of the screen. Make sure you have: position: sticky; and not display: sticky;

杂项可用性问题

Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices. On iPhone X for instance they display a narrow line to indicate the swipe region (to get back to the homepage) - and elements inside this region aren't clickable. So if you stick something there be sure to test on iPhone X that users can activate it. A big 'Buy Now' button is no good if people can't click it! If you're advertising on Facebook the webpage is displayed in a 'webview' control within Facebook's mobile apps. Especially when displaying video (where your content begins in the bottom half of the screen only) - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page. Be sure to test in the context of an actual ad and not just in the phone's browser or even Facebook's browser which can all behave differently.

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

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

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

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

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

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

粘滞元素的真实行为是:

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

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

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

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

这个例子将帮助你理解:

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

溢出需要被移除或设置为initial来创建位置，这是TRUE: sticky作用于子元素。我在我的Angular应用中使用了材质设计，发现一些材质组件改变了溢出值。我的解决方案是

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}