我知道这是一个老帖子。但如果有人像我一样，最近才开始摆弄位置:粘性，这可能是有用的。

在我的例子中，我使用position: sticky作为网格项。它没有工作，问题是一个溢出x:隐藏在html元素。只要我删除了该属性，它就工作得很好。有溢出x:隐藏在身体元素似乎工作，但不知道为什么。

粘滞元素的真实行为是:

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

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

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

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

这个例子将帮助你理解:

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

// Sticky Code

const stickyItem = document.querySelector(".item- made-sticky")

document.addEventListener（“scroll”， （） => { stickyItem.style.transform = translateY（${window.scrollY}px） })

从我的评论来看:

位置:粘需要一个坐标来确定粘的位置

nav { position: sticky; top: 0; } .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; } body { height: 200vh; } <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>

除了FF和Chrome，其他浏览器也可以使用polyfill。这是一个实验性的规则，可以通过浏览器随时实现，也可以不实现。Chrome在几年前添加了它，然后删除了它，它似乎回来了…但能持续多久呢?

最接近的是position:relative +坐标，当滚动到达粘性点时更新，如果你想将其转换为javascript脚本

我还遇到了一些事情:

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

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

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