JavaScript function not working when page reloads in react js
I have implemented javascript function in react js. when implement the code, the function run perfectly but as i reload the browser, the function doesnot work. the function is as i scroll the page, the logo of header get small. as i'm new to the react js kindy help me in this. thanks in advance.
const Navigation =()=>{
return(
<div className="body">
<div className='container'>
<Navbar collapseOnSelect expand="lg" variant="dark" fixed="top" className="navbarBg navbar-fixed-top">
<Container className="logo-className">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
开发者_开发知识库 <Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto links">
<Nav.Link className="nav-items text-nowrap active left" href="#header-container">Home</Nav.Link>
<Nav.Link className="nav-items text-nowrap left" href="#about-section">About Us</Nav.Link>
<Nav.Link className="nav-items text-nowrap left" href="#sevices-container">Services</Nav.Link>
<Nav.Link className="text-nowrap mobile"><img id='navbar-logo' src={Logo} alt='logo' loading="lazy" /></Nav.Link>
<Nav.Link className="nav-items text-nowrap right" href="#Our-games">Our Projects</Nav.Link>
<Nav.Link className="nav-items text-nowrap right" href="#">Blog</Nav.Link>
<Nav.Link className="nav-items text-nowrap right" href="#contact">Contact Us</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
</div>
);
}
export default Navigation;
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("navbar-logo").style.cssText = "width: 22%; position: relative; top: -38px; left: 150px;";
} else {
document.getElementById("navbar-logo").style.cssText = "width: 28%;";
}
}
Add an event listener for scroll. You can do this if you're using class:
componentDidMount() {
window.addEventListener('scroll', this.scrollFunction);
},
componentWillUnmount() {
window.removeEventListener('scroll', this.scrollFunction);
},
scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("navbar-logo").style.cssText = "width: 22%; position: relative; top: -38px; left: 150px;";
} else {
document.getElementById("navbar-logo").style.cssText = "width: 28%;";
}
},...
Or this with hooks
:
import React, { useEffect, useState } from 'react';
function Navigation () {
const [offset, setOffset] = useState(0);
useEffect(() => {
const scrollFunction = () => {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("navbar-logo").style.cssText = "width: 22%; position: relative; top: -38px; left: 150px;";
} else {
document.getElementById("navbar-logo").style.cssText = "width: 28%;";
}
};
window.removeEventListener('scroll', scrollFunction);
window.addEventListener('scroll', scrollFunction, { passive: true });
return () => window.removeEventListener('scroll', scrollFunction);
}, []);
console.log(offset);
};
精彩评论