Question

这是fadeIn菜单的演示：

我正在寻找一些关于我有一个棘手的隐藏问题的建议。所以我的菜单在某一点上使用以下内容淡入：

$(window).scroll(function () {
   var d = $('#menu'); 
    if (d.offset().top > 810) {
       d.fadeIn();
    } else {
       d.stop().hide();
    }
});

我需要做的是菜单中的一个链接不被隐藏并显示在页面顶部，然后一旦菜单出现与其他链接一起保留。

菜单显示如下：

<div id="menu">

    <div class="top-bar">

        <div class="container">

            <div>
                <a href="index.php" class="top-bar-brand">MyWebsite</a>                  
            </div>

            <nav>
                <ul class="navbar-right">
                    <li><a href="">Buy Now</a></li>
                    <li><a href="">Link2</a></li>
                    <li><a href="">Link2</a></li>
                    <li><a href="">Login</a></li>
                </ul>  
            </nav>    
        </div>

    </div>

</div>


#menu {
    width : 100%;
    height : auto;
    overflow: auto;
    position: fixed;
    display : none;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 999999;
}

所以名为“登录”的链接需要随时显示，但菜单上的其他链接和背景颜色会显示在滚动上，然后再次隐藏，但“登录”链接仍然存在。

Answer 1

我试过这个，看看这是不是你想要的 JSfiddle updated

    <div id="menu">

    <div class="top-bar">

        <div class="container">

            <div>
                <a href="index.php" class="top-bar-brand hideme">SchoolShare</a>                  
            </div>

            <nav>
                <ul class="navbar-right">
                    <li class="hideme"><a href="">Buy Now</a></li>
                    <li class="hideme"><a href="">Parents</a></li>
                    <li class="hideme"><a href="">Schools</a></li>
                    <li><a href="">Login</a></li>
                </ul>  
            </nav>    
        </div>

    </div>

</div>
</div>

<div class="bodydiv">Scroll down</div>

javascript

$('.hideme').hide();
$(window).scroll(function () {
   var d = $('#menu'); 
    if (d.offset().top > 810) {
       $('.hideme').fadeIn();
        $('#menu').css({'background':'rgba(255,255,255,0.9)'});
    } else {
       $('.hideme').fadeOut();
        $('#menu').css({'background':'rgba(255,255,255,0)'});
    }
});

css

#menu {
    width : 100%;
    height : auto;
    overflow: auto;
    position: fixed;
    z-index: 999999;
}

.top-bar{
    width:100%;
    overflow:auto;
    height:auto;
    padding: 10px 0;
}

.top-bar-brand{
    float:left;
    font-size:18px;
    color: #2C3E50;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 10px;
}

nav{
    float:right;    
    height: 100%;
    margin: 0;
    padding: 4px 0 0 0;
}

.navbar-right{
}

.navbar-right ul{
    padding: 0;
    list-style:none;
}

.navbar-right li{
    display:inline-block;
    margin: 0 10px;
}

body{background-color: #ddd;}

.bodydiv{height: 2000px;}
.hideme {
    display: none;
}
#menu {
    -webkit-transition: background 500ms ease;
    -moz-transition: background 500ms ease;
    -o-transition: background 500ms ease;
    transition: background 500ms ease;
}

Answer 2

JSFIDDLE DEMO

HTML：

<div id="menu">

    <div class="top-bar">

        <div class="container">

            <div>
                <a href="index.php" class="top-bar-brand">SchoolShare</a>                  
            </div>

            <nav>
                <ul class="navbar-right">
                    <li><a href="">Buy Now</a></li>
                    <li><a href="">Parents</a></li>
                    <li><a href="">Schools</a></li>
                </ul>  
            </nav>    
        </div>

    </div>

</div>
<a class="login" href="">Login</a>

<div class="bodydiv">Scroll down</div>

的CSS：

    #menu {
    width : 100%;
    height : auto;
    overflow: auto;
    position: fixed;
    display : none;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 999998;
}

.login{
    position: fixed;
    right: 0;
    z-index: 999998;
    top: 38px
}

.top-bar{
    width:100%;
    overflow:auto;
    height:auto;
    padding: 10px 0;
}

.top-bar-brand{
    float:left;
    font-size:18px;
    color: #2C3E50;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 10px;
}

nav{
    float:right;    
    height: 100%;
    margin: 0;
    padding: 4px 65px 0 0;
}

.navbar-right{
}

.navbar-right ul{
    padding: 0;
    list-style:none;
}

.navbar-right li{
    display:inline-block;
    margin: 0 10px;
}

body{background-color: #ddd;}

.bodydiv{height: 2000px;}

Javascript未编辑。

Javascript显示/隐藏菜单滚动扭曲

2 个答案: