Javascript 使用淡入淡出的php/js更改始终在顶部的菜单

我想在一个网站上做一个“永远在最上面”的菜单。当你在上面的时候我就不一样了，如果你向下滚动菜单就会改变。 我的问题是，当菜单更改其显示时，我会得到新的1。 我想随着褪色而改变，但我不知道如何才能做到这一点。 （示例：始终在顶部更改菜单：） 以下是我所拥有的：

HTML:

JS:

$（函数（）{
变量菜单=$（“#菜单”），
pos=菜单偏移量（）；
$（窗口）。滚动（函数（）{
if（$（this.scrollTop（）>pos.top+menu.height（）&&menu.hasClass（'default'））{
menu.fadeOut（'fast'，function（）{
$（this）.removeClass（'default'）.addClass（'fixed'）.fadeIn（'fast'）；
});
}否则如果（$（this）.scrollTop（）在CSS上，您应该添加
位置
，并给它
固定
值，如


#菜单{
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#426d9c）、颜色停止（40%、#0f67a1）、颜色停止（100%、#1384d1））；
背景：-莫兹线性梯度（顶部，#426d9c，#0f67a1，#1384d1）；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
线高：20px；
文本对齐：居中；
保证金：0自动；
填充：0；
位置：固定；
z指数：99；
}
.违约{
宽度：100%；
高度：50px；
盒影：0 5px20px#888；
-网络工具包盒阴影：0 5px 20px#888；
-moz盒阴影：0 5px 20px#888；
}
在CSS上，您应该添加
位置
，并给它
固定值
如下


#菜单{
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#426d9c）、颜色停止（40%、#0f67a1）、颜色停止（100%、#1384d1））；
背景：-莫兹线性梯度（顶部，#426d9c，#0f67a1，#1384d1）；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
线高：20px；
文本对齐：居中；
保证金：0自动；
填充：0；
位置：固定；
z指数：99；
}
.违约{
宽度：100%；
高度：50px；
盒影：0 5px20px#888；
-网络工具包盒阴影：0 5px 20px#888；
-moz盒阴影：0 5px 20px#888；
}
im在JS中使用.fixed类，它根据滚动位置更改菜单类。淡入淡出也应该进入css，对吗？im在JS中使用.fixed类，它根据滚动位置更改菜单类。淡入淡出也应该进入css，对吗？
<div id="navi">
<div id="menu" class="default">
<img align="left" width="15%" height="100%" src="pics/a.jpeg"/>
    <ul>
        <li><a href="#">Rólunk</a></li>
        <li><a href="#">Lakóknak</a></li>
        <li><a href="#">GYIK</a></li>
        <li><a href="#">Kapcsolat</a></li>

    </ul>
</div><!-- close menu -->

#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

line-height: 20px;
text-align: center;
margin: 0 auto;
padding: 0;
 z-index: 99;
}
.default {
width: 100%;
height: 50px;

box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}

.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
height: 5%;

box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}

$(function(){

var menu = $('#menu'),
    pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('fast');
            });
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('fast');
            });
        }
    });

});