JQuery fadeTo()

Question

到目前为止，我已经知道了这个代码：

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
    } 

这个想法是一个低不透明度的菜单，当我向下滚动时，它会消失，但问题是，当我向上滚动到<400时，我不能将它恢复到低不透明度(0.7)。

我一直在四处寻找，但我没有找到解决办法。

有什么想法吗？

提前谢谢。

Answer 1

有几个问题。首先，您从不检查scrollTop是否是<= 400，因此当然不会返回。

第二个问题是，即使使用了您的代码，您也会不断地重新应用fadeTo，无论何时窗口滚动，即使它已经是> 400。

var fadedIn = false;
$(window).scroll(function() {
    var thisScroll = $(this).scrollTop();
    if (thisScroll > 400 && !fadedIn) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
        // Or with a stop: $( ".top-bg" ).stop().fadeTo("slow", 0.99);
        fadedIn = true;
    } else if (thisScroll <= 400 && fadedIn) {
        $( ".top-bg" ).fadeTo("slow", 0.7);
        // Or with a stop: $( ".top-bg" ).stop().fadeTo("slow", 0.7);
        fadedIn = false;
    }
});

Answer 2

试着像这样

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $( ".top-bg" ).fadeTo("slow", 0.99);
    }else if($(this).scrollTop() <= 400)
{
        $( ".top-bg" ).fadeTo("slow", 0.7);
}