Javascript在滚动时显示/隐藏菜单

Javascript show/hide menu on scroll with a twist

本文关键字：隐藏菜单 显示 滚动 Javascript      更新时间：2023-09-26

这是菜单淡入的演示：

小提琴演示

我

正在就我遇到的一个棘手的节目隐藏问题寻求一些建议。因此，我的菜单在某个时间点使用以下方法淡入：

$(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;
}
因此，名为"登录"

的链接需要始终显示，但其他链接和菜单的背景颜色显示在滚动上，然后再次隐藏，但"登录"链接仍然存在。

我试过这个，看看这是否是你想要的JSfiddle 已更新

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

JSFIDDLE DEMO

目录：

<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未编辑。

相关文章：