Div fadeIn/Out on scroll + visibility on top of page
<p>I am currently using: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop &lt; this.previousTop) {
        $("#menu").fadeIn();
    } else {
        $("#menu").fadeOut();
    }
    this.previousTop = currentTop;
});
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>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. </p>

<p>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!</p>