Hide Or Show Menu In Html

To make a Static Menu in HTML, here's the HTML code:

<header id="header" role="banner">
    <div class="test"></div>
    <nav class="navigation" role="navigation">
        <ul class="menu unfixed" role="menu">
            <li class="button" role="menuitem"><a href="#">Menu 1</a>
            </li>
            <li class="button" role="menuitem"><a href="#">Menu 2</a>
            </li>
            <li class="button" role="menuitem"><a href="#">Menu 3</a>
            </li>
        </ul>
    </nav>
</header>

Now the javascript is to hide or show menu. As per our requirement here's the code:

JavaScript code:

var _ie6 = $.browser == 'msie' && $.browser.version < 7;

if (!_ie6) {
    $(window).scroll(function () {
        var _y = $(this).scrollTop(),
            _nav = $('.navigation'),
            _top = $('.navigation').height();
        if (_y >= _top) {

            if (!_nav.hasClass('fixed')) {
                _nav.addClass('fixed').hide(), _nav.find('ul').removeClass('unfixed').addClass('fixed'),
                _nav.fadeIn(600);
            }
        } else {
            _nav.removeClass('fixed'), _nav.find('ul').removeClass('fixed').addClass('unfixed');
        }

    });
}

And finsl the css code is below for giving the styling

#header {
    position:relative;
    width:100%;
    height:3000px;
}
.test {
    height:100px;
}
.navigation {
    position:relative;
    width:370px;
    height:50px;
    margin:0 auto;
    background:#ccc;
    z-index:100;
    border-radius:10px;
}
.navigation .menu {
    height:50px;
}
.navigation .menu .button {
    float:left;
}
.navigation .menu .button a {
    display:block;
    width:100px;
    height:20px;
    line-height:20px;
    color:#fff;
    background:#0072BA;
    font-family:Helvetica, sans-serif;
    text-align:center;
    padding:5px;
    margin:10px 0 0 10px;
    border-radius:5px;
}
nav.fixed {
    position: fixed;
    width:100%;
    top: 0;
    left:0;
    margin:0;
    border-radius:0;
}
ul.fixed {
    width:370px;
    position:relative;
    margin:0 auto;
}
ul.unfixed {
    position:absolute;
    margin:0 auto;
}

Finally the following is the generated output: