Shadow under fixed header upon scrolling - html

Question

I am creating a website and I want shadow under my fixed header upon scrolling.
This means when the site loads there is no shadow under the header but when I scroll the page the shadow should appear below the header.
Here is my css code
EDIT : I am using reactjs for rendering the header
.nav-heading {
background-color: $white;
top: 0;
display: flex;
flex-direction: row;
position: fixed;
width: 100%;
z-index: 1;
// margin-top: 1.25rem;
}
.nav-heading::after {
position: fixed;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.7);
}

Answer 1

You could use JQuery, that is a javascript lib.
First you need to install JQuery.
One easy way is by CDN.
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
Then add your script like this.
<script>
$(window).scroll(function(){
$(".nav-heading").css("box-shadow","here insert the value you want for the box-shadow")
})
</script>
If you want to the shadow fade out after scrolling you can use:
<script>
$(window).scroll(function(){
$(".nav-heading").css("box-shadow","here insert the value you want for the box-shadow").fadeOut( "slow" );
})
</script>
You can access more about in:
https://code.jquery.com/
Edit: How Using React.js
You can create functions to deal with the state of scrolled or not.
constructor() {
super();
this.state = {
className: 'notShadow'
}
}
handleScroll() {
if (document.documentElement.scrollTop > 430) {
this.setState({
className: 'withShadow'
})
}
}
componentDidMount() {
window.onscroll = () => this.handleScroll()
}
And then inside your header you can call the state as class.
<Nav className={this.state.className} />
If you don't know the number of pixels you can use:
console.log(document.documentElement.scrollTop);