fixed menu

<div id="menu" class="default">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Joolma</a></li>
            <li><a href="#">WordPress</a></li>
            <li><a href="#">HTML5&amp;CSS3</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
</div>
//css
#menu {
    width: 920px;
    text-transform: uppercase;
    text-align: center;
    line-height: 50px;
    background: #69c;
}
  #menu ul {
    padding:0;
    margin:0;
    width:100%;
  }
  #menu li{
    display: inline;
    list-style:none;
    margin: 5px 10px;
  }
     #menu li a {
        padding:5px 10px;
        color:#fff;
        text-decoration: none;
     }
     #menu li a:hover{
        background: #36c;
        color: #ff0;
}
#menu.default {
    width:920px;
}
#menu.fixed {
    position:fixed;
    top:0; left:0;
    width:100%;
}
//js
        var $menu = $("#menu");
 
        $(window).scroll(function(){
            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
                $menu.removeClass("default").addClass("fixed");
            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
                $menu.removeClass("fixed").addClass("default");
            }
        });//scroll