fadeout wenn Betrag

Question

gescrollt

$(window).bind('scroll', function() { 
    if ($(this).scrollTop() > 520) { 
     $('.box').fadeIn(); 
    } else { 
     $('.box').stop().fadeOut(); 
    } 
}); 

Ich habe dieses Stück Code, das .box blendet nach dem Scrollen etwas macht, aber ich merkte, dass es nur nach dem Scrollen nach oben auf der Seite ausgeblendet wird. Ich möchte, dass es ausgeblendet wird, während ich zurück zum Anfang scrolle (bevor ich es erreiche). Gibt es eine Möglichkeit, das zu tun?

Answer 1

Sie rufen die fadeIn und fadeOut jedes Mal die scroll Ereignis ausgelöst wird, wenn man wirklich nur einmal schießen wollen sie, wenn die Positionsänderungen von oberhalb der 520 Linie darunter, oder umgekehrt. Ich habe auch den Anruf zu stop() herausgenommen, das ich denke, ist hier unnötig (Sie können ein debounce auf dem scroll Ereignishandler stattdessen verwenden, wenn das Problem Ereigniskollision ist).

$(window).bind('scroll', function() { 
    var belowLine, visible; 
    belowLine = $(this).scrollTop() > 520; 
    visible = $box.is(':visible'); 
    if (belowLine && !visible) { 
    $box.fadeIn(); 
    } 
    if (!belowLine && visible) { 
    $box.fadeOut(); 
    } 
}); 

Ich habe ein paar Variablen für die Selbstdokumentation verwendet.