我也有同样的问题。对我来说，问题在于大屏幕上的显示:“none”(media-query)和智能手机上的显示:“initial”。如果我删除了display css属性，并在桌面上添加了不透明度和指针事件，一切都解决了。

z指数也很重要。有时候它会起作用，只是你看不到而已。试着把它设置为一个非常高的数字，只是为了确定。也不要总是放top: 0，而是尝试一些更高的，以防它被隐藏在某个地方(在工具栏下面)。

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

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!

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

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

我还遇到了一些事情:

当你的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.