How do I show a div on scroll with a fadeout after a period of time? Want to use a fadein/fadeout effect with no loop

Question

I want a div (a menu) to appear when the users scrolls, then fadeout after a brief time so it does not interfere with the reading, then appear again if the user scrolls. So far, the following code does the job, but I want a fadein effect when the div appears.

CSS

.onscrollbutton {
  display: none;
}

jQuery

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

Erasing the CSS and changing the jQuery code to this results in a fadein/fadeout loop, even if the user does not scroll:

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

How can I achieve the first effect, but with a smooth transition?

Answer 1

fadeOut is causing the scroll event to trigger because it is basically removing the height of the .onscrollbutton element. Try absolute positioning the element and it should work. Worked for me.