Question

If you go here, you’ll see a “Danger Will Robinson” button that is probably set to CSS position:fixed. When you scroll down the page it stays at the top of the window/viewport. Notice there’s like a white box-shadow (or a fadeOut effect?) surrounding this box. Thus, as you scroll down the page, all of the elements (mostly grey buttons) seem to fade out.

I’m trying to figure out how to grab this cool ‘as-you-scroll-down, the-content-at-the-top-of-the-page-seems-to-fadeout’ effect. It’s a bit over my head.

Answer 1

There is an example demo here. Simply changing:

#bottom_fade {
    ...
    bottom: 0px;
    background: /* yadda yadda */
}

to:

#bottom_fade {
    ...
    top: 0px;
    /* as the other answers have explained */
    background: -webkit-linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

will achieve the effect you seek.