我想在一个网站上做一个"永远在最上面"的菜单。当你在上面的时候就不一样了,如果你向下滚动菜单就会改变。我的问题是,当菜单改变它的消失,然后我得到新的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');
});
}
});
});
我想在示例页上添加类似的内容
在你的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
类