How to change class of Nav bar when scrolling down in react? - reactjs

Question

hi this is my code and i want to change my Navigation bar color on scrolling but how can i do it?
i want to remove my class and add my new class to it,but i cant do this and i am newbie in react.
do i need life cycle hooks?
what should i do for my state?
import React from 'react';
import DrawerToggleButton from '../SideDrawer/DrawerToggleButton'
import './Toolbar.css'
class Toolbar extends React.Component {
state = {
};
scroll = () => {
if (this.scrollTop() <= 10){
(".toolbar").addClass("scroll");
}
else{
(".toolbar").removeClass("scroll")
}
};
render() {
return(
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerToggleButton click={this.props.drawerClickHandler} />
</div>
<div className="toolbar__logo"><a href={"/"}>THE LOGO</a></div>
<div className="spacer"/>
<div className="toolbar_navigation-items">
<ul>
<li><a href={"/"}>Products</a> </li>
<li><a href={"/"}>Users</a> </li>
</ul>
</div>
</nav>
</header>
);
}
}
export default Toolbar;
and this is my css code:
.toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(
to right,
#e4faff 0%,
#e9f8ff 50%,
#f9f6ff 50%,
#e9f8ff 100%);
height: 56px;
z-index: 200;
}
.toolbar__navigation {
display: flex;
height: 100%;
align-items: center;
padding: 0 1rem;
}
.toolbar__logo {
margin-left: 1rem;
}
.toolbar__logo a {
color: #3500b6;
text-decoration: none;
font-size: 1.5rem;
}
.spacer {
flex: 1;
}
.toolbar_navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li {
padding: 0 0.5rem;
}
.toolbar_navigation-items a {
color: #370ab6;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active {
color: #000000;
border-bottom: 2px solid black;
}
.toolbar.scroll {
background-color: black;
color: white;
}
#media (max-width: 768px) {
.toolbar_navigation-items {
display: none;
}
}
#media (min-width: 769px) {
.toolbar__toggle-button {
display: none;
}
.toolbar__logo {
margin-left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
i used javascript as i now about this syntax but in react what should i do?