JavaScript function 在反应 js 中重新加载页面时不工作

Question

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%;";
  }
}

Answer 1

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); 
};