Div drop shadow that fades out as you scroll down

Question

I am looking for a way to have my main contents div have a drop shadow that fades away as you scroll down the page. The perfect example is at http://www.gamespot.com/ notice their main content has a drop shadow that makes its pop but then slowly goes away making the site look flat. How is this effect achieved? Thanks!

Screenshot:

Answer 1

One solution, as briefly mentioned above in the comments, is to use a gradient drop-shadow as demonstrated here:

http://jsfiddle.net/3eDpM/

The other solution (a more static one) is to use a small image in the background, say, a 2px by 40px gradient produced in photoshop. Then, have that image repeat horizontally in the background of the desired div, while positioning it to the top left. Such as:

width: 2px;
height: 40px;
background-position: left top;
background-image: url('../img/gradient.png');
background-repeat: repeat-x;