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

Posted 2023-03-06

【中文标题】根据元素当前偏移量更改不透明度

【英文标题】：Change the opacity based on elements current offset

【发布时间】：2013-06-24 00:28:50

【问题描述】：

我尝试根据每个当前的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/

有什么想法可以完成这项工作吗？

【参考方案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/ 编辑

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/

【讨论】：

太棒了！但是，如果滚动偏移量在0，所有图像都被隐藏，问题仍然存在...... :(

好吧，摆弄了一下，似乎它不会从0% 到50%-scroll 偏移量，而不是从0% 到100%-scroll 偏移量...