jquery - 基于左滚动距离的不透明度

Question

$(document).scroll(function() {

    var distanceLeft = $(document).scrollLeft();

    if( distanceLeft > 3800)
    {
        $('#first_circle').animate({
            opacity: 1
        }, 1000);
    }

    if( distanceLeft < 3800)
    {
        $('#first_circle').animate({
            opacity: 0
        }, 1000);
    }
)};

嗨，我试图纠正这个问题，以便当滚动超过 3800 时，div 淡入，当用户向后滚动时，它淡出？感谢您的任何意见

Answer 1

只需更改变量并添加一些数学：http: //jsfiddle.net/z7E9u/155/

Answer 2

您当然可以使用mkey answer之类的简单方法。但是，如果您需要更复杂的东西来“动画”尝试jQuery Transe。对于这个问题，它是一个彻底的解决方案。您可以根据当前的滚动偏移量更改几乎任何内容（甚至 CSS3-Transforms 等）。

在你的情况下，尝试这样的事情：

$('#fading').transe({
    direction: 'x',
    start: 3575,
    end: 4150,
    css: 'opacity',
    from: 0,
    to: 1
});

演示