jquery - 平滑从静态定位到粘性标题的固定定位的过渡？

Question

请看一下我正在构建的这个网站上的黑色导航栏：http: //thesemlab.com/

当您向下滚动时，我正在使用 jQuery Waypoints 将此栏的位置从静态更改为固定。插件：http: //imakewebthings.com/jquery-waypoints/

我的问题是，如果您向下滚动得相当快，这不是一个非常平滑的过渡。它会很快跳到固定位置，看起来有点笨拙。

我尝试过使用 CSS 过渡，但它什么也没做！任何想法将不胜感激。

谢谢！

Answer 1

这是一篇很老的帖子，网上有很多很好的例子。以防万一有人遇到这个问题，这个帮助最大（https://remysharp.com/2017/06/29/smooth-scroll-with-sticky-nav）。帮助的主要事情是使用“requestAnimationFrame”作为限制 window.onscroll 事件以与时间一致的手段。

下面是一些 React 代码的一部分，但希望它能提供更多的想法。

// ... 从功能组件中。

const [isFixed, setIsFixed] = useState(false);

useEffect(() => {
    const checkSetIsFixed = () => {
        const { y } = containerRef.current.getBoundingClientRect();
        if (y <= 0) {
            setIsFixed(true);
        } else {
            setIsFixed(false);
        }
    }

    checkSetIsFixed();

    const onScroll = (e) => {
        requestAnimationFrame(checkSetIsFixed);
    };

    window.addEventListener("scroll", onScroll);

    return () => {
        window.removeEventListener("scroll", onScroll);
    }
}, []);