position: sticky现在在一些移动浏览器上可用，因此您可以使菜单栏随着页面滚动而滚动，但是当用户滚动超过它时，它会固定在视口的顶部。
但是，如果您想在当前“粘性”状态下稍微重新设计您的粘性菜单栏怎么办？例如，当它随页面滚动时，您可能希望该栏具有圆角，但是一旦它固定在视口的顶部，您希望去掉顶部圆角，并在其下添加一些阴影。
是否有任何伪选择器（例如::stuck）来针对当前处于“sticky”状态的具有position: sticky的元素？或者浏览器供应商是否有类似的东西在开发中？如果没有，我应该在哪里提出请求？
注意：对于这种情况，JavaScript解决方案并不好，因为在移动设备上，通常只有一个scroll事件，当用户释放手指时才会触发，因此JS无法知道滚动阈值被穿过的确切时刻。
目前没有为“固定”元素提出任何选择器的建议。定义了position: sticky的位置布局模块中也没有提到任何这样的选择器。
CSS的功能请求可以发布到www-style邮件列表。我认为一个:stuck伪类比::stuck伪元素更合理，因为你要在元素本身处于该状态时针对它们进行定位。事实上，:stuck伪类在一段时间前就已经讨论过；发现的主要问题是困扰几乎所有尝试根据呈现或计算样式进行匹配的建议选择器的循环依赖性。
对于:stuck伪类来说，最简单的循环情况会出现在以下CSS中：
:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }
还有许多更棘手的边缘情况需要解决。
虽然人们普遍认为，基于某些布局状态匹配选择器会很好，但不幸的是存在重大限制，使得这些实现起来并不容易。我不会对这个问题很快出现纯CSS解决方案抱有期待。
IntersectionObserver 可以解决问题，如果情况允许将其粘贴到根容器外的一个或两个像素处，而不是正确地完全依靠它。这样，当它坐落在边缘之外时，观察者就会触发，然后我们就可以开始运行了。const observer = new IntersectionObserver(
([e]) => e.target.toggleAttribute('stuck', e.intersectionRatio < 1),
{threshold: [1]}
);
observer.observe(document.querySelector('nav'));
使用top: -2px将元素粘在其容器外，然后通过stuck属性进行定位...
nav {
background: magenta;
height: 80px;
position: sticky;
top: -2px;
}
nav[stuck] {
box-shadow: 0 0 16px black;
}
padding-top: 60px :) - Tim WillisrootMargin:'-61px 0px 90px 0px' 作为观察器的选项。其中 -61 使得 intersectionRect 的顶部边距更小。90像素将边界推出 instersectionRect，防止滚动过元素时出现卡住的属性。 - Tieskevo我希望找到一个纯CSS的解决方案，可以像使用::stuck伪选择器一样对'固定'元素进行样式设置（遗憾的是，即使到了2021年，这个选择器仍然不存在）。
我创建了一个纯CSS hack，它可以在不使用JS的情况下实现此效果，并满足我的需求。它通过使用两个元素的副本来实现，其中一个是sticky，另一个则不是(unstuck)，后者将覆盖sticky元素，直到你滚动它。
演示：https://codepen.io/TomAnthony/pen/qBqgErK
备用演示：https://codepen.io/TomAnthony/pen/mdOvJYw（这个版本更符合我的要求，我希望只有当它们被“固定”后，粘性条目才会出现-这也意味着没有重复内容。）
HTML：
<div class="sticky">
<div class="unstuck">
<div>
Box header. Italic when 'stuck'.
</div>
</div>
<div class="stuck">
<div>
Box header. Italic when 'stuck'.
</div>
</div>
</div>
CSS：
.sticky {
height: 20px;
display: inline;
background-color: pink;
}
.stuck {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 20px;
font-style: italic;
}
.unstuck {
height: 0;
overflow-y: visible;
position: relative;
z-index: 1;
}
.unstuck > div {
position: absolute;
width: 100%;
height: 20px;
background-color: inherit;
}
aria-hidden=true 设置为其中一个以避免无障碍性问题。更好的解决方案可能是将重复内容放入 data-content="..." 中，并使用 content: attr(data-content) 样式化 :after 元素。不过我还没有尝试过。 - phil294Google Developers 博客上的某篇文章声称已经找到了一个基于 JavaScript 的高性能解决方案，其中使用了 IntersectionObserver。
相关代码片段如下：
/**
* Sets up an intersection observer to notify when elements with the class
* `.sticky_sentinel--top` become visible/invisible at the top of the container.
* @param {!Element} container
*/
function observeHeaders(container) {
const observer = new IntersectionObserver((records, observer) => {
for (const record of records) {
const targetInfo = record.boundingClientRect;
const stickyTarget = record.target.parentElement.querySelector('.sticky');
const rootBoundsInfo = record.rootBounds;
// Started sticking.
if (targetInfo.bottom < rootBoundsInfo.top) {
fireEvent(true, stickyTarget);
}
// Stopped sticking.
if (targetInfo.bottom >= rootBoundsInfo.top &&
targetInfo.bottom < rootBoundsInfo.bottom) {
fireEvent(false, stickyTarget);
}
}
}, {threshold: [0], root: container});
// Add the top sentinels to each section and attach an observer.
const sentinels = addSentinels(container, 'sticky_sentinel--top');
sentinels.forEach(el => observer.observe(el));
}
我自己没有复制过它，但也许对于那些在这个问题上跌跌撞撞的人有所帮助。
我不是很喜欢使用js hack来设置样式（例如getBoundingClientRect、scroll监听、resize监听），但这是我目前解决问题的方法。这种解决方案在具有可最小化/最大化内容（<details>）或嵌套滚动或任何曲线球的页面上会出现问题。话虽如此，这是一个简单的解决方案，适用于问题也很简单的情况。
let lowestKnownOffset: number = -1;
window.addEventListener("resize", () => lowestKnownOffset = -1);
const $Title = document.getElementById("Title");
let requestedFrame: number;
window.addEventListener("scroll", (event) => {
if (requestedFrame) { return; }
requestedFrame = requestAnimationFrame(() => {
// if it's sticky to top, the offset will bottom out at its natural page offset
if (lowestKnownOffset === -1) { lowestKnownOffset = $Title.offsetTop; }
lowestKnownOffset = Math.min(lowestKnownOffset, $Title.offsetTop);
// this condition assumes that $Title is the only sticky element and it sticks at top: 0px
// if there are multiple elements, this can be updated to choose whichever one it furthest down on the page as the sticky one
if (window.scrollY >= lowestKnownOffset) {
$Title.classList.add("--stuck");
} else {
$Title.classList.remove("--stuck");
}
requestedFrame = undefined;
});
})
如果你有一个在 position:sticky 元素上方的元素，这是一种紧凑的方法。它设置属性 stuck，你可以在 CSS 中使用 header[stuck] 进行匹配：
HTML:
<img id="logo" ...>
<div>
<header style="position: sticky">
...
</header>
...
</div>
JS:
if (typeof IntersectionObserver !== 'function') {
// sorry, IE https://caniuse.com/#feat=intersectionobserver
return
}
new IntersectionObserver(
function (entries, observer) {
for (var _i = 0; _i < entries.length; _i++) {
var stickyHeader = entries[_i].target.nextSibling
stickyHeader.toggleAttribute('stuck', !entries[_i].isIntersecting)
}
},
{}
).observe(document.getElementById('logo'))
:stuck把top的值从0改为300px，然后向下滚动了150px……它应该固定还是不固定？再考虑一下一个带有position: sticky和bottom: 0的元素，:stuck也许会改变font-size，从而改变元素的大小（因此改变了应该固定的时机）。 - Romanwhile循环设计得不好，因为它允许无限循环 :) 不过，谢谢你的澄清 ;) - Marek Lisý