0

これを行う方法についていくつかの提案を読みましたが、不透明度がページのオフセットに達したときに不透明度を変更し、変更をアニメーション化する方法をカバーする提案が見つかりません。また、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>
4

2 に答える 2

0

これで編集できると思います：

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)
    ;
});
于 2015-07-31T09:44:42.800 に答える
0

Instead of setting the final value at one using fading.css('opacity',opacity);, animate it by using fading.animate({opacity: opacity}, 'fast');

于 2013-01-20T08:29:55.083 に答える