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

以下是菜单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;
}

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

该菜单显示以下内容：

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

#菜单{
宽度：100%；
高度：自动；
溢出：自动；
位置：固定；
显示：无；
背景色：rgba（255、255、255、0.9）；
z指数：999999；
}

---

因此，名为“登录”的链接需要始终显示，但其他链接和菜单的背景色显示在滚动条上，然后再次隐藏，但“登录”链接仍然存在。

我尝试了这个，看看这是否是您想要的

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

Html:

---

Javascript未编辑。

您能将此问题放入JSFIDLE吗？菜单不会显示当前代码。。。除非你的页面有垂直滚动条bar@Stefan我已经更新了我的问题demo@Lost是的，如果你看到菜单显示超过810像素的任何东西，那么在我的演示中，我添加了一个body div来显示这个。现在我看到它在隐藏元素中。你必须首先从隐藏的div中取出它。这几乎就是我想要的，但是徽标和背景需要隐藏，只是“登录”总是显示出来…这可行吗？我修改了HTML、javascript和CSS，所以你需要应用所有这些，但都是以一种奇怪的方式工作的…所以所有链接最初在页面加载时显示，当您滚动时，它们会消失，然后再次出现在显示点。是的，这就是

$（'.hideme'）.hide（）的目的将其添加到
文档中。准备好了吗
如果你有oneNice方法-不编辑原始html结构。嗨，Jacob，差不多了，但我需要登录才能显示，并且也要在右侧的菜单中。因此，最初是显示在网页的顶部，然后当你向下滚动菜单背景显示与其他链接。更新：）现在它是好的，我想。它只是html/css编辑。@Roi的Javascript版本也很好。它可以正常工作，但有一种奇怪的方式…所以所有链接最初在页面加载时显示，然后在滚动时消失，然后再次出现在显示点。我没有任何褪色的Javascript:D很有趣，你现在在说什么。在我的小提琴上，一切都很好。可能是浏览器问题？
<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>

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