![](/img/trans.png)
[英]Checking login status and changing navbar text based on it (React.js)
[英]Changing color of Navbar react js
我正在尝试使用此代码更改导航栏的颜色。
const [navbarColor, setNavbarColor] = useState("navbar-transparent");
const [collapseOpen, setCollapseOpen] = useState(false);
useEffect(() => {
const updateNavbarColor = () => {
if (
document.documentElement.scrollTop > 399 ||
document.body.scrollTop > 399
) {
setNavbarColor("");
} else if (
document.documentElement.scrollTop < 400 ||
document.body.scrollTop < 400
) {
setNavbarColor("navbar-transparent");
}
};
window.addEventListener("scroll", updateNavbarColor);
return function cleanup() {
window.removeEventListener("scroll", updateNavbarColor);
};
});
这就是我制作导航栏的方式
<Navbar className={"fixed-top " + navbarColor} expand="lg" color="info">
但是,当我向下滚动 web 页面时崩溃,尽管代码看起来不错。
试试这个逻辑代码。
import { useEffect } from 'react'
export function useObservableAnimations() {
const animationOnScroll = () => {
const target = document.querySelectorAll('[data-animation')
target.forEach(element => {
if (element.getBoundingClientRect().top < window.innerHeight) {
element.classList.add('animation-start')
return
}
element.classList.remove('animation-start')
})
}
useEffect(() => {
window.addEventListener('scroll', animationOnScroll)
}, [])
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.