The HTML
Let’s start with the basis: The HTML. Place this code just after the opening <body> tag of your html document. If you’re applying this tutorial to a WordPress blog, this code should go into your header.php file.
<div id="fixmenu"> <a href="http://www.yoursite.com"><img src="path/to/yourlogo.png" alt="" /></a> <ul class="menu-fixed"> <li><a href="http://www.yoursite.com">Home</a></li> <li><a href="#header" id="srolltotop">Top</a></li> </ul> </div><!-- #fixmenu -->
As you can see, we created a container (#fixmenu), a site logo and link, as well as a <ul> list containing our menu items. Feel free to add more menu items to fit your needs.
The CSS
The second step is the CSS. Let’s make a beautiful fixed menu! Paste the code below in your style.css (or whatever it is named) file.
#fixmenu{
width: 1122px;
height:30px;
margin-left:-48px;
padding:5px 48px;
position:fixed;
top:0;
background:#7eb7d9;
display:none;
}
.menu-fixed{
width: 260px;
float: right;
text-align: right;
padding:4px 0 5px 0;
list-style-type:none;
}
.menu-fixed li{ display:inline; }
.menu-fixed a{
ont-size:0.9em;
color:#fff;
text-shadow:1px 1px #5E8BC5;
padding:0 0 0 10px;
}
This is the exact CSS code I used on CatsWhoCode, so maybe you’ll have to adapt it a bit. If you have a look at your html document right now, nothing will show up. Why? because of the display:none; property that I added to the #fixmenu container. This is simply because we only want our fixed menu to be visible when the regular header menu can’t be seen due to scrolling.
The jQuery
So how do we detect when the page have been scrolled enough so the header of the site isn’t visible anymore? We’re going to use jQuery, of course. Paste this code in the bottom of your html document; in the footer.php file if you’re applying this to a WordPress blog. Of course, make sure you have included the jQuery framework before this code.
$(document).ready(function() {
$(window).scroll(function(){
if(document.body.scrollTop > 300)
$('#fixmenu').fadeIn( "slow", function() { });
else
$('#fixmenu').fadeOut( "slow", function() { });
});
$('a#srolltotop').click(function(){
$('html, body').animate({scrollTop:0}, 100);
return false;
});
});
What this code do is pretty simple: On line 3, we detect if the document has been scrolled more than 300 pixels from the top. If yes, the fadeIn() jQuery function is called in order to display the fixed menu. On the other hand, the fadeOut() function is used to hide the menu when the top of the document is visible.
On line 9, I added a bit of code to detect when the #scrolltop link is activated. A click will smooth scroll to top of the document.