Question

我想在网站上制作1个“永远在线”菜单。当你真正处于最顶层时，我会有所不同，如果你向下滚动，菜单就会改变。我的问题是，当菜单改变其消失时，我得到新的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');
            });
        }
    });

});

我想在示例页面上找到类似的内容。

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 class

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

1 个答案: