<div id="menu">
	        <ul>
	            <li><a href="#">Главная</a></li>
	            <li><a href="#">Joolma</a></li>
	            <li><a href="#">WordPress</a></li>
	            <li><a href="#">HTML5&CSS3</a></li>
	            <li><a href="#">PHP</a></li>
	        </ul>
	    </div>

	    CSS:


	    #menu {
	            text-transform: uppercase;
	            text-align: center;
	            line-height: 50px;
	            background: #69c;
	            text-shadow:0 1px 1px black;
	           -moz-border-radius: 5px;
	            -webkit-border-radius:5px;
	            border-radius:5px;
	        }

	        #menu ul {
	            padding:0;
	            margin:0;
	        }

	        #menu li{
	            display: inline;
	            list-style:none;
	            margin: 5px 10px;
	        }

	        #menu li a {
	            padding:5px 10px;
	            color:#fff;
	            text-decoration: none;
	            -webkit-border-radius: 5px;
	            -moz-border-radius: 5px;
	            border-radius: 5px;
	        }


	        #menu li a:hover{
	            background: #36c;
	            color: #ff0;
	            -webkit-transition-property: color, background;
	            -webkit-transition-duration: 0.5s, 0.5s;
	        }

	        .default {
	            width:920px;
	        }

	        .fixed {
	            position:fixed;
	            top:-5px; left:0;
	            width:100%;
	            padding:10px 0;
	            -moz-box-shadow: 5px 5px 20px #333;
	            -webkit-box-shadow: 5px 5px 20px #333;
	            box-shadow: 5px 5px 20px #333;
	        }

	        .transbg {
	            background-color: rgba(60, 130, 190, 0.7)!important;
	        }


	        jQuery:

	        $(document).ready(function(){

	        var $menu = $("#menu");

	        $(window).scroll(function(){

	            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){

	                $menu.fadeOut('fast',function(){

	                    $(this).removeClass("default")

	                           .addClass("fixed transbg")

	                           .fadeIn('fast');

	                });

	            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {

	                $menu.fadeOut('fast',function(){

	                    $(this).removeClass("fixed transbg")

	                           .addClass("default")

	                           .fadeIn('fast');

	                });

	            }

	        });//scroll


	        $menu.hover(

	            function(){

	                if( $(this).hasClass('fixed') ){

	                    $(this).removeClass('transbg');

	                }
	            },

	            function(){

	                if( $(this).hasClass('fixed') ){

	                    $(this).addClass('transbg');
	                }

	            });//hover

	    });//jQuery