根据元素当前偏移量更改不透明度

Question

我试图根据每个当前的offset为一些图片设置opacity。问题是，如果向下滚动太远，不同图片的透明度不相等。

以下是我想要实现的，对于每张图片：

################
#              #
#              #
#              #
#   === <= opacity 1
#              #
#   *** <= opacity 0.6
#              #
################

    ... <= opacity 0

目前它只对前2-3个图像有效。之后的所有图像都不是从0-1设置，而是从0.5-40或其他数值设置。

另一个问题是，如果滚动偏移为0，则所有图像都将被隐藏...

这是我迄今为止所做的。

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $img.each(function () {
        var $self = $(this);

        $self.css({
            opacity: scrollTop / $self.offset().top
        });
    });

}).scroll();

有什么想法可以让它工作？

http://jsfiddle.net/ARTsinn/c5SUC/0/

- yckart

Answer 1

你可以尝试一下

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
var scrollTop = $win.scrollTop();

$img.each(function () {
    var $self = $(this);
    var prev=$self.prev().offset();
    var pt=0;
    if(prev){
        pt=prev.top;        
    }
    $self.css({
        opacity: (scrollTop-pt)/ ($self.offset().top-pt)
    });
    console.log(scrollTop+" / "+$self.offset().top+"-"+pt);
});

}).scroll();    

http://jsfiddle.net/mQHEs/
EDIT

var $win = $(window);
var $img = $('img');

$win.on('scroll', function () {
var scrollTop = $win.scrollTop();

$img.each(function () {
    var $self = $(this);
    var prev=$self.prev().offset();
    if(prev){
        var pt=0;
        pt=prev.top;    
        $self.css({
            opacity: (scrollTop-pt)/ ($self.offset().top-pt)
        });
    }
    else{          //SHOW FIRST IMG
        $self.css({
            opacity: 1
        });
    }  
});

}).scroll();     

http://jsfiddle.net/mQHEs/1/

- Abraham Uribe

---

太好了！然而，问题仍然存在，如果滚动偏移量为0，所有图像仍将被隐藏... :( - yckart

好的，我尝试了一下，似乎它不是从0％到50％滚动偏移渐变，而是从0％到100％滚动偏移渐变... - yckart