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

不是使用fading.css('opacity',opacity);将最终值设置为1，而是使用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)
    ;
});

用jQuery滚动调整div不透明度？

2 个答案: