javascript - 使用 jQuery 滚动时调整 div 不透明度？

Question

我已经阅读了一些关于如何执行此操作的建议，但我找不到一个涵盖如何在不透明度达到页面上的偏移量并为更改设置动画时更改不透明度的建议。还要记住，我不想完全淡出 div，只要用户滚动到某个点后将不透明度减半。

我想出了这个，但我不知道如何正确地动画不透明度的变化：

<script type="text/javascript">
var fadeStart=150 
,fading = $('#header')
;

$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
;
if( offset<=fadeStart ){
    opacity=1;
}else if( offset>=fadeStart ){
    opacity=0.5;
}
fading.css('opacity',opacity);
});
</script>

Answer 1

与其将最终值设置为一个 using fading.css('opacity',opacity);，不如通过 using 对其进行动画处理fading.animate({opacity: opacity}, 'fast');

Answer 2

我认为您可以使用以下内容进行编辑：

var fadeStart=150
    ,fading = $('#header')
;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity)//.html(opacity)
    ;
});