Question

当我向下滚动时，我试图更改元素的Opacity。当我滚动回到顶部时，将不透明度更改回正常状态。但是我在这方面遇到了问题。

#menu
{
    opacity:0.6
}

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $( "#menu" ).fadeTo("fast", 1);
    } else {
        $( "#menu" ).fadeTo("fast", 0.6);
    }
});

上面的代码不起作用，或者在某些情况下它会稍微运行并再次停止！我真的很困惑，因为我尝试使用下面的代码来简单地淡化它，它可以毫无障碍地工作。

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $( "#menu" ).fadeOut();
    } else {
        $( "#menu" ).fadeIn();
    }
});

Answer 1

我会这样做：

$(window).scroll(function ()
    {
        if (window.pageYOffset > 100) 
        {
            $('#menu').addClass('no-opacity');
        } 
        else
        {
            $('#menu').removeClass('no-opacity');
        }
    });

在css中：

.no-opacity { opacity:0; }

再次在css中：逐步改变：

#menu { transition: all 0.5s linear 0s; }

Answer 2

首先，我建议在.stop()方法之前使用fadeTo，因为您在每个scroll事件上执行它！

之后，你的两个代码块不一样，在第一个代码块中，如果滚动大于100，则表示元素（不透明度为1），第二个代码反之亦然，请尝试：

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $( "#menu" ).stop().fadeTo("fast", 0.6);
    } else {
        $( "#menu" ).stop().fadeTo("fast", 1);
    }
});

jsFiddle Demo

Answer 3

为了缩短它，你可以这样做：

JS

var _st;
$(window).scroll(function ()
{
    _st = $(this).scrollTop();
    $('#menu').css({opacity:(_st > 100) ? 0 : 1 });
})

CSS

#menu { transition: opacity 0.5s linear 0s; }

动画不透明度在jquery中无法正常工作

3 个答案:

JS

CSS