Wie zeige ich ein Div auf Scroll mit einem Fadeout nach einer gewissen Zeit? Möchte einen Ein-/Ausblendungseffekt ohne Schleife verwenden

Question

Ich möchte ein div (ein Menü) erscheinen, wenn der Benutzer scrollt, dann nach einer kurzen Zeit ausblendet, so dass es das Lesen nicht stört und dann wieder erscheint, wenn der Benutzer scrollt . Bis jetzt macht der folgende Code den Job, aber ich möchte einen Fadein-Effekt, wenn das Div erscheint.

CSS

.onscrollbutton { 
    display: none; 
} 

jQuery

<script> 
    $(window).scroll(function(){ 
    $(".onscrollbutton").css("display","block").delay(5000).fadeOut("slow"); 
    }); 
</script> 

die CSS Löschen und das jQuery-Code, um dies zu ändern führt zu einer FadeIn/fadeout Schleife, auch wenn der Benutzer blättern nicht ab:

<script> 
    $(window).scroll(function(){ 
    $(".onscrollbutton").fadeIn("slow").delay(5000).fadeOut("slow"); 
    }); 
</script> 

Wie kann ich den ersten Effekt erzielen, aber mit einem weichen Übergang?

Answer 1

bewirkt, dass das Scroll-Ereignis ausgelöst wird, da es im Wesentlichen die Höhe des Elements .onscrollbutton entfernt. Versuchen Sie, das Element absolut zu positionieren, und es sollte funktionieren. Arbeitete für mich.