Question

我是jquery的新手，所以这应该是一个非常基本的问题。

这里我有一个脚本，根据以像素为基础的滚动位置淡化滚动中的#fading div in / out，但我会使用百分比。

我在前两行中一直收到错误。

var fadeStart=10%
    ,fadeUntil=50%
    ,fading = $('#fading')
;

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

Answer 1

在代码中表达百分比的最常用方法是从0到1的数字。

CSS opacity属性也使用此值。

为了完成这项工作，您可以执行以下操作：

var fadeStart=0.1
    ,fadeUntil=0.5
    ,fading = $('#fading')
;

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

jquery使用百分比而非像素

1 个答案: