有没有办法用vh打开window.scrollY

Question

有什么方法可以在window.scrollY中使用vh吗？或者有没有window.scrollY的替代方案可以使用vh？

我有一个英雄形象占据了屏幕的90vh。我希望导航栏在滚动90vh后将颜色从transparent更改为#f0f0f0。window.scrollY见第7行。

谢谢。

function Header() {
const [navBackground, setNavBackground] = useState(false);
const navRef = useRef();
navRef.current = navBackground;
useEffect(() => {
const handleScroll = () => {
const show = window.scrollY > [insert 90vh here];
if (navRef.current !== show) {
setNavBackground(show);
}
};
document.addEventListener("scroll", handleScroll);
return () => {
document.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<section className="header__header">
<div className="header__navbar-container">
<Navbar
className="header__navbar"
style={{
backgroundColor: navBackground ? "#f0f0f0" : "transparent",
}}
>
...

Answer 1

我使用了window.pageYOffset > (window.innerHeight)*0.9。

这是我使用的参考：如何使用vh单位而不是像素.滚动顶部功能