更新

Question

我最近在我的网站上实施了一个固定导航栏，可以通过点击网站左上角的菜单按钮来访问。它在页面顶部工作正常，但在向上或向下滚动后，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;
}

非常感谢任何建议!!

更新

由于美学原因，我决定删除导航栏，但是如果它与未来的建造者相关，我会留下这个问题。

Answer 1

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

向下滚动后固定位置导航栏slideUp slideDown功能中断

更新

1 个答案: