floating menu bar only shows scrolling above

Question

I have a floating menu bar for example like that

<div id="header">
    <div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
    <div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
            </ul>    
            <br class="clearLeft" />
        </div>
    </div>
</div>

and a few fancy CSS Style and we need to add the JavaScript code to tie everything together like that

$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css({
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    }
    else if (!shouldBeFixed && isFixed)
    {
        nav.css({
            position: 'static'
        });
        isFixed = false;
    }
});
});

So the floating works really good but I would like to see the menu only if I scroll up, so If I scroll down the menu should disappear.

The main thing is that I don't want to scoll back to the top. so the menu bar should appear if I only scoll a little bit up to see the menu. ​