Div fadeIn/Out on scroll + visibility on top of page

Question

I am currently using:

<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $("#menu").fadeIn();
    } else {
        $("#menu").fadeOut();
    }
    this.previousTop = currentTop;
});
</script>

To make the menu of my page fade out when scrolling down and fade in when scrolling up, which works. What isn't working is that I need to always be visible when being on top of the page.

The only solutions I have found makes the fade in/out on scroll solution disabled, I am trying to find a solution where both of them work together. Ex. always visible when scrolling the top 200px, but with the functions of fade in/out on scroll up/down. Any suggestions? Thanks!

Answer 1

I edited and tried out the code. The best solution is to remove fadeOut:

<script>
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if ( currentTop == 0 ) {
         $("#menu").addClass('static-on-top');
    } else {
        $("#menu").removeClass('static-on-top');
        if (currentTop < this.previousTop ) {
            $("#menu").fadeIn();
        } else  {
           $("#menu").hide();
       }
    }
    this.previousTop = currentTop;
});
</script>
<style type="text/css">
.static-on-top {
      display: block !important;
}
#menu {
    position: fixed;
    height: 30px;
    background: red;
    width: 100%;
    top: 0;
    left: 0;
}
</style>
<div id="menu">
    Menu
</div>