How can I go about making this code only show the div tag when the user scrolls to the top of the page?

Question

The code below currently moves the div tag 'navigation' (a header) to the top of the page on scroll down, and moves it back down (underneath a second header) when you scroll up. I'm trying to adjust it so that it doesn't move back down every scroll up, but when you reach the top of the page. Does anyone know how I could achieve this?

// Move header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.navigation').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('.navigation').removeClass('.navigation').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.navigation').removeClass('nav-up').addClass('.navigation');
        }
    }

    lastScrollTop = st;
}

Answer 1

$(window).scroll(function() {
   if($(window).scrollTop() == 0) { 
      // position menu for when unscrolled
   }
   else {
     // position menu for when scrolled
   }
});

Here is an application similar to what you are trying to do to illustrate the function: JSFIDDLE