我使用了带有useState和useEffect的react.js Hooks,当我向下滚动并且屏幕向下时,标题在250像素后隐藏。现在我想知道如何在向上滚动时使用 React Hooks 显示标题。
const Navbar = () => {
const [show, setShow] = useState(false)
const controlNavbar = () => {
if (window.scrollY > 250 ) {
setShow(true)
}else{
setShow(false)
}
}
useEffect(() => {
window.addEventListener('scroll', controlNavbar)
return () => {
window.removeEventListener('scroll', controlNavbar)
}
}, [])
Run Code Online (Sandbox Code Playgroud)
和标题:
<header className={`active ${show && 'hidden'}`}></header>
Run Code Online (Sandbox Code Playgroud)
CSS:
.active{
height: 4rem;
width: 100%;
position: fixed;
top: 0px;
transition: 0.3s linear;
display: flex;
justify-content:stretch;
align-items: center;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(0, 0, 0, .1); …Run Code Online (Sandbox Code Playgroud)