Question

所以，基本上，我的网页上有一个标题，当我滚动时，我希望这个标题变得透明（不透明度为0.4），当我停止滚动时，它会恢复（不透明度1）。

Answer 1

$(document).ready(function(){
    var timer;
    $(document.body).on("scroll", function(){
        $("#header").fadeTo("fast", 0.4);
        if(timer)
            clearTimeout(timer);
        timer = setTimeout(function(){
            $("#header").fadeTo("fast", 1);
        }, 100);
    });
};

Answer 2

设置超时是捕获用户停止滚动的最佳解决方案。您还需要设置stop()以防止进一步的淡入淡出和闪烁。

$(window).on("scroll", function(){
    $("#header").stop().fadeTo("fast", 0.4);

    clearTimeout($.data(this, 'timeout'));
    $.data(this, 'timeout', setTimeout(function() {
        $("#header").stop().fadeTo("fast", 1);
    }, 300));

});

请参阅此jsfiddle：http://jsfiddle.net/daec2/

在滚动时，标题不透明度会发生变化，但在停止滚动时会返回到1

2 个答案: