I am trying to create a header that has a background image, but when a user scrolls, the header takes too long to change color and ends up overlapping with the body. Any tips on how i can prevent the header and body overlapping will be appreciated. My code and how the page looks on scroll is as below:
<div>
<Header
color="transparent"
brand="Truhditions"
rightLinks={<HeaderLinks />}
fixed
changeColorOnScroll={{
height: 200,
color: "white"
}}
{...rest}
/>
<Parallax small filter image={require("assets/img/profile-bg.jpg")} style={{height: 250}}/>
<div className={classes.container} style={{background:"#E5E5E5"}}>
<BusinessesSection category={rest.location.data} />
</div>
<Footer />
</div>
The current header on scroll looks like this :
This is what i want :
