Is there a way to gradually fade in a shadow while scrolling, so that the shadow only reaches an opacity of 0.5 after scrolling a certain number of pixels? I've come across solutions to add a shadow or class to the top banner based on content position, but haven't found one that mimics the effect seen on Google+ pages where the shadow slowly fades in and out as you scroll.
I've explored a solution like this one, but I'm looking for the shadow to gradually become more visible instead of appearing suddenly. Does anyone know how this can be achieved using jquery and css3?
Might it be possible to implement this effect in steps? While the following code is not functional, it might provide some insight:
var done = $(document).scrolltop() - 20x;
// use this value as 100% scrolled
$(document).scroll(function() {
// animate shadow opacity at 20%, 40%, 60%, 80%, and 100%
}