Question

How to dynamically change level of the shadow opacity under fixed header while scrolling down?

I found many solutions of how to add a shadow instantly on scroll down. But how to change it step by step, so it appears to fade in slowly.

Here is example – Dynamic shadow
As you can see if you scroll down with a tiny steps the shadow will appear slowly.
I think they are changing opacity level.
And I found that Google in account settings uses the same effect with changing opacity level.

I have my solution, but shadow is appearing instantly so its not what i want to create

Answer 1

All you need to do is change

$('#top-shadow).show();

to

$("#top-shadow").css({'display':'block', 'opacity':y/10});