使用IntersectionObserver向上滚动后粘贴标头

Question

我正在尝试创建粘性标题菜单。

问题是我希望它在用户向上滚动后粘住，反之亦然我希望有人能告诉我如何完成这项工作。

这是我尝试过的：

const header = document.querySelector('.header');
const headerPositionNotifier = document.createElement('div');
header.parentNode.insertBefore(headerPositionNotifier, header);

const options = {
    threshold: [0]
};
const callback = (entries) => {
    entries.forEach(({
        intersectionRatio
    }) => {
    if (intersectionRatio == 0) {
        header.classList.add('s')
    } else {
        header.classList.remove('s')
    }
  })
}

const io = new IntersectionObserver(callback, options);
io.observe(headerPositionNotifier);