Fixed navigation on scroll becomes fixed only after it has scrolled off screen

On this site , http://evolutionhire.com/ , I've got a navigation bar which should become fixed when it reaches the top of the screen . However it is not performing as expected in that it becomes fixed a couple of hundred pixels after scrolling off screen as opposed to when it hits the top

<ul class="menu">
    <li><a href="#camera">CAMERA</a></li>
    <li><a href="#lighting">LIGHTING</a></li>
    <li><a href="#sound">SOUND</a></li>
    <li><a href="#grip">GRIP</a></li>
    <li><a id="consumables" class="open-consumables">CONSUMABLES</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>

This is the class that's added

.fixed {
position: fixed;
top: 0;
}

And the jquery to implement the class

(function ($) {
"use strict";

var menuPosition = function () {
    var nav = $(".menu"),
        height = nav.outerHeight(),
        windowHeight = $(window).height();

    if ($(window).scrollTop() > (windowHeight - height))
        nav.addClass('fixed');
    else 
        nav.removeClass('fixed');        
};

menuPosition();
$(document).scroll(menuPosition);
}(jQuery));