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);
    }
}, []);

Answer 2

像http://whiteboard.is/这样的东西？你有一个流畅的（呃）动画？如果没有某种滑动/褪色动画，我认为很难做到没有？

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

2 个答案: