javascript - 固定标题需要透明度

Question

我的标题有一个 div，它使用 position: fixed in css 以保持原位。但是，当滚动内容位于其下方时，我想在 div(使用 #color 的 div 背景)上添加一些透明度。

用 CSS 可以吗？我的赌注是某种 JavaScript(也许是 jQuery)？我对 JS 不是很熟悉，任何例子都会很棒。

谢谢，安德烈。

PS:我没有为页面背景或页眉使用任何图像。

Answer 1

您可以通过在 div 上设置 opacity 来实现这一点。值 0-1 值越低，div 越透明。

jQuery

$('#divID').css('opacity','.4');

它也可以用普通的 css 来完成

#divId {
    opacity:.4;
}

更新

如果您只希望标题在滚动时透明，您需要使用 jQuery 执行以下操作:

$(window).scroll(function() {
    $('#divID').css('opacity','.4');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('#divID').css('opacity','1');
    }, 250));
});

更新 2

如果您只希望在窗口向下滚动时标题透明。

$(window).scroll(function() {
    if($(this).scrollTop() == 0)
        $('#divID').css('opacity','1');
    else
        $('#divID').css('opacity','.4');
});

例子

http://jsfiddle.net/VZU9K/