3

我正在做粘性标头实现 - 我不想使用position: sticky;，因为我没有看到好的 polyfill，所以我尝试使用IntersectionObserver API。问题是 - 我真的不喜欢它提供的行为，因为它的条目可能会随机延迟发出。如果您逐渐滚动，此解决方案可以正常工作，但如果您滚动得更快，标题会上升，并且只有在延迟响应之后它才会获得fixed类并以显着跳跃定位，尤其是在沉重的页面上。有什么方法可以实现更好的响应，或者 IntersectionObserver 可能不适合我的目的？

const header = document.querySelector('.header');
const headerPositionNotifier = document.createElement('div');
headerPositionNotifier.classList.add('header-position-notifier')
header.parentNode.insertBefore(headerPositionNotifier, header);

const options = {
  threshold: [0]
};
const callback = (entries) => {
  entries.forEach(({
    intersectionRatio
  }) => {
    if (intersectionRatio == 0) {
      header.classList.add('fixed')
    } else {
      header.classList.remove('fixed')
    }
  })
}
const io = new IntersectionObserver(callback, options);
io.observe(headerPositionNotifier);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-family: Arial;
  color: white;
  letter-spacing: 10px;
}

.banner {
  background: orange;
  padding: 20px;
}

.parent {
  background: mediumvioletred;
  position: relative;
}

.header {
  background: salmon;
  padding: 40px 0;
}

.content {
  background: #444;
  padding: 40px 0;
  height: 2000px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-position-notifier {
  height: 1px;
}
<div class="banner">
  BANNER
</div>
<div class="parent">
  <div class="header">
    HEADER
  </div>
  <div class="content"></div>
</div>

4

1 回答 1

3

如果你不能为此使用 CSS，那你就倒霉了。延迟只是来自滚动事件的延迟，你不能让它消失。正如你所说，在沉重的页面上它会变得更糟。即使在不同的浏览器上，它或多或少也会更糟。我更愿意结合css位置粘性和作为交叉点观察者的后备。

于 2020-04-15T06:38:36.530 回答