使用jQuery滚动时调整div不透明度？答案

【问题标题】：Adjust div opacity upon scroll with jQuery?使用jQuery滚动时调整div不透明度？
【发布时间】：2013-01-03 13:42:00
【问题描述】：

我已经阅读了一些关于如何执行此操作的建议，但我找不到一个涵盖如何在不透明度达到页面上的偏移量后更改不透明度并为更改设置动画的内容。还要记住，我不想完全淡出 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>

【问题讨论】：

标签： javascript jquery animation opacity

【解决方案1】：

我想你可以用这个来编辑：

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)
    ;
});

【讨论】：

【解决方案2】：

不要使用fading.css('opacity',opacity); 将最终值设置为1，而是使用fading.animate({opacity: opacity}, 'fast'); 对其进行动画处理

【讨论】：