Question

这应该很简单，但我无法弄清楚它为什么不起作用。

如果滚动顶部位于特定区域内，则淡出图像。如果使用鼠标滚动或使用键盘箭头键，则此方法有效。但是当你使用鼠标拖动滚动条时，函数被调用 - 我可以在日志中看到这一点 - 但是jQuery fadeTo不能立即工作。如果我停止滚动，大约5秒后图像会消失。

$(window).scroll(function(){
    var scrollYpos = $(document).scrollTop();

    if(scrollYpos > 100 && scrollYpos < 200){               
        fade_out_img();
    }
    else{
        fade_in_img();
    }
});

function fade_out_img(){
    $("#image").stop().fadeTo('slow', 0.1);
}
function fade_in_img(){
    $("#image").fadeTo('slow', 1.0);
}

提前感谢您的帮助。

Answer 1

Working jsFiddle Demo

您错过stop() fade_in_img函数的方法。

<强> HTML

<div id="image"></div>
<div id="scroll"></div>

<强> CSS

#image {
    width: 200px;
    height: 1000px;
    background: red;
}

#scroll {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 300px;
    overflow: auto;
    background: yellow;
}

JavaScript （由jQuery编写）

$(function () {
    $(window).scroll(function(){
        var scrollYpos = $(document).scrollTop();

        // for debugging
        $('<div>').text(scrollYpos).prependTo('#scroll');

        if(scrollYpos > 100 && scrollYpos < 200){               
            fade_out_img();
        }
        else{
            fade_in_img();
        }
    });

    function fade_out_img(){
        $("#image").stop().fadeTo('slow', 0.1);
    }

    function fade_in_img(){
        $("#image").stop().fadeTo('slow', 1.0);
    }
});

不要忘记查看jsFiddle demo。

jQuery函数在window.scroll事件不起作用时淡化图像

1 个答案: