Floating Menu

Floating Menu

// Place this below <?php wp_head(); ?> in HEADER.php
// where #masthead is the ID of the main menu div wrapper and "floating" is the new class being created to handle the floating menu

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
$(document).ready(function () {  
  var top = $('#masthead').offset().top - parseFloat($('#masthead').css('marginTop').replace(/auto/, 100));
  $(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
      $('#masthead').addClass('floating');
    } else {
      // otherwise remove it
      $('#masthead').removeClass('floating');
    }
  });
});
    </script>