How to display the box-shadow on scrolling down a few pixels?

Here's the topnav CSS code:

.topnav{
                background-color: #d9d9d9;
                position:fixed;
                top: 0;
                width: 100%;
                overflow: hidden;
                box-shadow: 0px 5px 20px -8px #d9d9d9;
            }

html code:

<div class="topnav">
<a href="index.html" class="active" >Home</a>
<a href="explore.html">Explore</a>
</div>

I want the box shadow to appear on scrolling down a few pixels, then disappear on scrolling back to top.