具有粘滞和收缩效应的移动document.scrollingElement.scrollTop的准确性问题

Question

我使用document.scrollingElement.scrollTop来获取用户在页面上的位置，以触发一个粘性的收缩标题。它在台式机上运行良好，但在移动设备上，当达到条件( if (yPosition > 50) )时，它就不能很好地工作。标题将“振动”(收缩，然后在几秒钟内多次重置为正常)。我在yPosition上使用了console.log，并注意到这是因为在移动设备上，当问题发生时，值在48-54之间切换，从而触发我上面描述的问题。

我猜问题是因为元素收缩的方式，如果我去除了收缩效应，那么我就不会再有这个问题了。我想保留缩小效果，并找到一种方法来消除移动设备上的这个问题。有什么提示吗？

有关我的问题的可视化表示，请参阅此gif：https://i.imgur.com/pxLVBge.mp4

这是我的代码，我删除了我认为不必要的部分，以演示我的问题。

​

const navMenu = (() => {
    const header = document.getElementById("header");
    const menu = document.getElementById("hamburger");


    const display = () => {
        menu.addEventListener('click', _defaultMenu);
    }

    const _defaultMenu = () => {
        menu.classList.toggle("active");
        if (menu.classList.contains("active")) {
            bodyScrollLock.disableBodyScroll(document.querySelector("body"));
        } else {
            bodyScrollLock.enableBodyScroll(document.querySelector("body"));
        }
    }

    const _shrinkMenu = () => {
        menu.classList.toggle("activeShrunk");
        if (menu.classList.contains("activeShrunk")) {
            bodyScrollLock.disableBodyScroll(document.querySelector("body"));
        } else {
            bodyScrollLock.enableBodyScroll(document.querySelector("body"));
        }
    }

    const stickyEffect = () => {
        document.addEventListener('scroll', () => {
            let yPosition = document.scrollingElement.scrollTop;
            console.log(yPosition);
            if (yPosition > 50) {
                menu.removeEventListener('click', _defaultMenu);
                menu.addEventListener('click', _shrinkMenu);
            }
            else {
                menu.removeEventListener('click', _shrinkMenu);
                menu.addEventListener('click', _defaultMenu);
            }
        })
    }

    return { display, stickyEffect };
})();

​

Answer 1

刚刚解决了我的问题。我从sticky切换到了fixed，现在它在移动设备上工作得很好。我认为这与sticky的工作方式有关。