Mega Menu as floating item using jQuery - drop-down collapse problem

Click here to access the site in reference

I added some jQuery functionality to the top navigation menu so that it always sits at the top of the page (overlays on top of other elements) when you scroll down a minimum of 100 pixels or more.

The problem I am having is that once you scroll down and you rollover any submenu items in the drop-down beyond the first item, the menu instantly disappears.

Any ideas on how to fix? Is there some sort of conflict with mega.js once you scroll down?

Here's the code below I added to head.php in order to get this jQuery function to work:

Code: Select all

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
 
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
 
  if (!msie6) {
    var top = $('#gk-mainnav').offset().top - parseFloat($('#gk-mainnav').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();
     
      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#gk-mainnav').addClass('fixed');
      } else {
        // otherwise remove it
        $('#gk-mainnav').removeClass('fixed');
      }
    });
  } 
});
</script>

Here's the css which renders the menu after you scroll down.

Code: Select all

#gk-mainnav.fixed > div.gk-menu > ul {
   background: transparent url('../images/style1/menu_bg.png') no-repeat left bottom;
   height: 43px;
   margin: 0;
   padding: 0;
   width: 910px;
   position: fixed;
   z-index: 9998;
   top: 0;
   -moz-box-shadow: 0px 0px 6px #272727;
   -webkit-box-shadow: 0px 0px 6px #272727;
   box-shadow: 0px 0px 6px #272727;
}