在100％高度div内很好地淡化元素的算法

Question

使用jQuery我有一个100％宽度和高度的div设置。它们在中间有一些使用jQuery垂直和水平居中的元素。当网站滚动时，我希望内部元素能够很好地淡出，但我无法找到一个好的算法。

<div id="header">
    <div id="header-inner">
        <h1>Site</h1>
        <h2>Slogan</h2>
    </div>
</div>

我想我可能需要获取标题的outerHeight（）并在那里做一些事情。所以：

$(window).scroll(function() {
    $('#header-inner').css({'opacity': 100 ??? });
});

小提琴在这里：

Fiddle