滚动后固定导航仅在滚动屏幕后才会固定

Question

在这个网站http://evolutionhire.com/上，我有一个导航栏，当它到达屏幕顶部时应该固定。然而，它没有达到预期的效果，因为它在滚动屏幕后固定了几百个像素，而不是在它击中顶部时

<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>

这是已添加的课程

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

实现类

的jquery

(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));