在滚动更改标题的不透明度？

【问题标题】：On scroll change opacity of header?在滚动更改标题的不透明度？
【发布时间】：2013-08-28 18:42:24
【问题描述】：

我对 JQuery 很陌生，我确信答案是超级基本的。但是，如果有人能指出我正确的方向，那就太好了。当用户滚动超过 400 像素时，我只希望我的标题的不透明度从 0 变为 1。帮助？ www.HULU.com 就是一个很好的例子。

<code>
<script>
$(document).ready(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 400) {
                $('.header').css("background", "#000");
            } else {
                $('.header').css("background", "transparent");
            }
        });
        });
</script>
</code>

【问题讨论】：

似乎按预期工作，但您只是设置背景，任何文本或子元素仍会显示，因此您可能应该设置 opacity 或显示属性？
jsfiddle.net/CWf2A/1

标签： jquery scroll opacity

【解决方案1】：

试试这个：

示例：http://jsfiddle.net/SEH5M/

HTML：

<div class="header">
    <div id="background"></div>
    <div id="labels">
        labels here
    </div>
</div>

<div class="content">
</div>

CSS：

.header{
    width:100%;
    height:100px;
    position:fixed;
    top:0px;
    z-index:3;
}

body{
    margin:0px;
}
.header #background, .header #labels
{
    position:absolute;
    top:0px;
    width:100%;
    height:100%;
}

.header #labels{
    background-color:transperent;
}

.header #background{
    background-color:yellow;
    display:none;
}


.content{
    width:100%;
    height:5000px;
    background-color:green;
}

JQuery:

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".header #background" ).fadeIn();
    } else {
        console.log('there');
        $( ".header #background" ).fadeOut();
    }
});

【讨论】：