Fix menu to the top

When visitors start to scroll through your content, you often find the menu disappears off the screen. This then requires used to scroll back to the top to find it again.

One easy way to keep them looking for more content is to fix this to the top of the screen. You can easily do this with some CSS like


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

However, you don’t really want to lose your layout options for where you menu sits, just that it takes a place at the top of the screen when the user scrolls. Fortunately, you can have the best of both worlds, using a bit of jQuery.

We can check on the scroll and if the user has scrolled a certain distance, apply the style that fixes the content to the top of the visible screen. Then, a quick bit of code to remove this CSS when they come back to the top.


$(window).scroll(function() {
if ($(document).scrollTop() > 70) {
$("#site-navigation").addClass("fixtoprow");
} else {
$("#site-navigation").removeClass("fixtoprow");
}
});