定位位置：当前处于“卡滞”状态的粘性元素

位置：sticky现在可在某些移动浏览器上使用，因此您可以使菜单栏随页面滚动，但是每当用户滚动通过时，便会停留在视口顶部。

但是，如果您想在当前“粘滞”时稍微改变粘滞菜单栏的样式，该怎么办？例如，您可能希望栏在页面上滚动时始终带有圆角，但是一旦它粘在视口的顶部，您就想摆脱顶部的圆角，并在其下方添加一个小阴影它。

是否有任何类型的伪选择器（例如::stuck）针对具有position: sticky 和当前粘附的元素？还是浏览器供应商正在准备中类似的东西？如果没有，我将在哪里提出要求？

注意 javascript解决方案对此不利，因为在移动设备上scroll，用户释放手指时通常只会得到一个事件，因此JS无法知道滚动阈值通过的确切时间。

当前没有针对当前“卡住”的元素提议选择器。所述Postioned布局模块，其中position: sticky被定义不任一提及任何此类选择器。

可以将CSS的功能请求发布到www样式的邮件列表中。我相信: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;
}

这里的例子： https //codepen.io/anon/pen/vqyQEK

Google Developers博客上的某人声称找到了具有IntersectionObserver的基于JavaScript的高性能解决方案。

相关代码位在这里：

/**
 * 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来设计样式（例如getBoudingClientRect，滚动侦听，调整大小侦听）以进行样式设置，但是我目前正在解决这个问题。此解决方案将对内容最小化/最大化（<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'))