JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-shadow">
	my header	
</div>
<div class="main-scroll-area">
    this is my content<br />
    when scrolldown, shadow appears<br />
    when scrollbar at 0, shadow disappears<br />
    this is my content<br />
    when scrolldown, shadow appears<br />
    when scrollbar at 0, shadow disappears<br />
    this is my content<br />
    when scrolldown, shadow appears<br />
    when scrollbar at 0, shadow disappears<br />
    this is my content<br />
    when scrolldown, shadow appears<br />
    when scrollbar at 0, shadow disappears<br />
</div>

CSS

.shadow-scrolled {
    -webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
  -moz-box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
  box-shadow:0 2px 2px -1px rgba(0,0,0,.6);
}
.header-shadow {
    background-color: #CCC;
    height:30px;
    position: relative;
    width: 100%;
    z-index:9;
}
.main-scroll-area {
    background-color: #fff;
    height:200px;
    position: relative;
    width: 100%;
    overflow:auto;
}

JavaScript

$(".main-scroll-area").scroll(function () {

	           var div = $(this);
			   if (div.scrollTop() == 0)
			   {
		          $('.header-shadow').removeClass('shadow-scrolled');
		       } else {
	           	  $('.header-shadow').addClass('shadow-scrolled');
	           }

	        });