Question

I have found many solutions to show a shadow or add a class to the top banner when the content has a top < 0px;. But, I would like to know if there was a way to slowly fade in the shadow while scrolling, so that maybe the shadow will only have an opacity:0.5 after scrolling 10px, for example?

It is used by Google in the Google+ pages, where you are scrolling the content and then the shadow underneath the top slowly fades in while scrolling, but also fades out again if you scroll up again. Can anybody please tell me how this is made with jquery and css3?

I have looked at this one but the only thing wrong is that I want the shadow to fade in more and more while scrolling.. I don’t want it to appear all of a sudden.

maybe it is possible to do it in steps.. This doesn’t work, but it may give you an idea..

var done = $(document).scrolltop() - 20x;
// now we can use this number as 100% scrolled

$(document).scroll(function() {
    // here we can animate the shadow opacity after 20%, 40%, 60%, 80% and 100%
}

Answer 1

DEMO — Something like this?

This example uses CSS3 transitions to fade in/out the box-shadow on the fixed element.

Update:

DEMO — Alternate solution where opacity of box-shadow reflects the scroll position where 100px (and greater) from the top of the page is 100% opacity (zero transparency) and 10px from top is 10% (or 0.1) opacity (90% transparency).