Anzeigen eines Elements beim Scrollen, Verbergen beim Scrollen

Question

Ich kann Code ausführen, wenn der Benutzer zu einem bestimmten Punkt scrollt, aber ich kann keine Fragen zum Anzeigen eines Elements finden, während der Benutzer scrollt (egal wo oder wohin) dann ausblenden, wenn der Benutzer das Scrollen stoppt. Gibt es einen einfachen Weg, dies in jQuery zu erreichen?

Answer 1

Verwenden feste Positionierung auf dem Element, und dieses Ereignis verwenden:

$(window).scroll(function() { 
    $(element).stop(true, true).show().fadeOut('fast'); 
}); 

Dieses das Element zeigen, während sie dann Scrollen fade out wenn das Scrollen beendet wurde. Die Methode stop() stoppt die gerade laufende Animation.

Fiddle

Answer 2

jQuery nicht event „scrollStop“ haben, so dass Sie eine setTimeout verwenden können Ihre Aktion

<div> 
    <div class="fade"> 
     Scroll down i will become invisible 
    </div> 
</div> 

$(window).scroll(function() { 
    clearTimeout($.data(this, 'scrollTimer')); 
     $('.fade').show(); 

    $.data(this, 'scrollTimer', setTimeout(function() { 
     // do something 
     $('.fade').hide(); 
    }, 250)); 
}); 

http://jsfiddle.net/onqn2gjj/896/

Answer 3

Mein Vorschlag einer Funktion zu verwenden ist, zu zeigen, das Element zu tun, wenn sofort erfolgt das Scrollen, und dann versteckte es eine gewisse Zeit später. Wenn wir erneut scrollen, "drücken" wir den Timer etwas weiter zurück. Dies ist im Grunde das Konzept der Entprellung, von dem Sie vielleicht schon gehört haben. Daher sieht meine Lösung wie folgt aus:

var hideTimeout = null; 

var show = function() { 
    $('#theone').show(); 
} 

var hide = function() { 
    $('#theone').hide(); 
} 

$(document).ready(function(){ 

    $(window).scroll(function(e){ 
    if (hideTimeout) { 
     window.clearTimeout(hideTimeout); 
     hideTimeout = null; 
    } 
    show(); 

    window.setTimeout(hide, 500); 
    }); 

}); 

https://jsfiddle.net/386bstgh/1/