始終在頂部菜單上隨着褪色php/js

Question

我想在網站上做一個「永遠在頂部」菜單。當你真正在上面時，我會有所不同，如果你向下滾動菜單將會改變。 我的問題是，當菜單正在改變其不足，然後我得到新的1. 我想改變與衰落，但我不知道我怎麼能做到這一點。 （例如總是褪色頂部更改菜單：http://www.aquariushand.hu/） 下面是我有：

HTML：

<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 --> 

CSS：

#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; 
} 

JS：

$(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'); 
      }); 
     } 
    }); 

}); 

我想要的東西就像在th例如頁面。

Answer 1

在你的CSS你應該添加position，並給它fixed值像

#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; 
 
    position:fixed; 
 
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使用.fixed類