Here is a code snippet using JavaScript:
var x = jQuery(window).innerHeight();
jQuery(document).scroll(function() {
if (jQuery(this).scrollTop() >= x) {
jQuery('#nav').removeClass('nav').addClass('topfix_nav');
} else {
jQuery('#nav').removeClass('topfix_nav').addClass('nav');
}
});
CSS:
The nav class has common properties for the menu.
.topfix_nav {
font-family: Verdana, Geneva, sans-serif;
height: 60px;
position: fixed;
top: 0%;
right: 0%;
background-color: #FFF;
width: 100%;
z-index: 999;
}
This code works in Chrome and Mozilla, but there seems to be an issue with IE 8 as it does not change the class and does not provide any error feedback.