【问题标题】：Fixed position navbar slideUp slideDown function breaks after scrolling down固定位置导航栏 slideUp slideDown 功能在向下滚动后中断
【发布时间】：2014-05-03 22:17:11
【问题描述】：

我最近在我的网站上实现了一个位置固定的导航栏，可以通过单击网站左上角的菜单按钮来访问它。它在页面顶部工作正常，但在向上或向下滚动后，slideUp/slideDown 功能会出现故障。它在 Safari 和我手机上的 Chrome 浏览器中运行良好，但在桌面上的 Firefox 和 Chrome 浏览器中运行良好。

网站位于：http://zackfischmann.com

所有代码都可以在https://github.com/zfisch/zfisch.github.io 找到，但我在下面也包含了最相关的代码。

JS：

$('#menu').click(function(){
    var nav = $('#navbar').css("display");
    var item = $('#navbar').css("display");
    if (nav == 'none') {        
        $("#navbar").slideDown();
        }
    else {
        $("#navbar").slideUp();
    }
    if (item == 'none') {
        $("#navbar-items").slideDown();
    }
    else {
        $("#navbar-items").slideUp();
    }});

导航栏的 HTML：

<div id="menu">
        <a href="#menu">
            <img src="img/menu.svg" alt="" height="40px" width="40px">
        </a>
    </div>
    <div id="navbar">  
        <div class="row" id="navbar-items">
            <div class="navbar-link col-xs-3">
                <a class="scroll" href="#Home"><span>Home</span></a>
            </div>
            <div class="navbar-link col-xs-3">
                <a class="scroll" href="#About"><span>About</span></a>
            </div>
            <div class="navbar-link col-xs-3">
                <a class="scroll" href="#Projects"><span>Projects</span></a>
            </div>
            <div class="navbar-link col-xs-3">
                <a class="scroll" href="#Contact"><span>Contact</span></a>
            </div>
        </div>
    </div>

CSS：

#menu {
float: left;
z-index: 1900000;
position: fixed;
}

#navbar {
height: 40px;
width: 100%;
opacity: 0.6;
background-color: black;
position: fixed;
z-index: 10;
display:none;
}

.navbar-link {
font-size: 1.5em;
list-style-type: none;
color: #fff;
font-weight: 300;
display: inline-block;
text-align: center;
margin-top: 5px
}

#navbar-items {
display: none;
text-align: center
}

#navbar-items a:link {
text-decoration:none;
color: #fff;
}

#navbar-items a:visited {
text-decoration:none;
color: #fff;
}

#navbar-items a:hover {
text-decoration:underline;
color: #fff;
}

#navbar-items a:active {
text-decoration:none;
color: #fff;
}

非常感谢任何建议！

更新

出于美观的原因，我决定删除导航栏，但我将这个问题留待以防它与未来的构建者相关。

【问题讨论】：

标签： jquery html css twitter-bootstrap slideup

【解决方案1】：

我个人建议默认菜单以桌面屏幕大小显示。您甚至没有注意到那里的图标全屏图片吸引了所有注意力，然后一旦开始滚动，您就无法在白色背景上看到它。因此，如果您在开始滚动之前没有看到它，您将永远不会知道有菜单。滚动时那里会出现一些闪烁。当代码中存在语法错误时，我注意到了这种行为。我可以在你的CSS中看到2。 #navbar-items 和 .navbar-link 都缺少关闭；
确保你的 css、html 和最重要的 js 中没有类似的错误

【讨论】：

css代码最后一行不需要分号，感谢设计反馈。
我只是说......如果你把它们放在外面，你可能把它们放在别处了。