jquery - Inactive links until scroll -

I'm having a strange HTML / JQuery problem

The top NAV HTML on my homepage described in HTML 5 There are links. For some reason, unless I scroll the page, the links do not 'activate' until I 'm just manipulating the NAV element on the scroll to' fixed 'and to change the background to a transparent black color. ; However, there should be no effect on that link.

On inspection using chrome, each menu item is linked to.

This is the code that manipulates the NAP on the scroll -

  $ (document) .scroll (function () {if (! Docked & $ (document) ScrollTop () & gt; 36) {docked = true; $ ('# menu CSS (' condition ',' fixed '); $ (' # '-' nav '). CSS (' background ',' RGBA (60 , 60,60,0.9) ''; $ ('# menu-nav' css ('height, 49 +' px ')) and if (doc and amp; $ (document)), css (' top ', 0 $ '(' # Menu-nav '). $ (' Background ',' '); $ (' # menu-nava ') $ (' # menu-nava '). ScrollTop () & buffer; CSS '(' position ',' absolute '' $ ('# menu-nav'). CSS ('top', 0)}})   
 This page is here - www.barandbean.com - and you can see that the link does not work until the NAV changes to 'fixed' state and scrolls with the window.  
 Any help will be appreciated. I can add more code snippets, but I'm not sure what will be most useful   
 
 
 Note that in addition to     position   static  (which is the default one) Then add  status: relative  or  status: full  to your  # menu-nav .  
 This works after the  scroll , because it is because you  complete