导航栏在滚动时出现和消失

Question

所以我正在尝试制作一个导航栏，当您第一次加载页面时它会隐藏并在您向下滚动到第二部分时显示，我已经让它工作了，但是当您在主页部分上下滚动时，导航栏在本应远离视线时不断出现和消失。

现场演示：http://zimxtrial.ukbigbuy.com/

JS：

<script type="text/javascript">
jQuery(document).ready(function() {
var startY= jQuery('#home').position().top + jQuery('#home').outerHeight();
jQuery('#nav-container').html( jQuery('#nav').html());
jQuery(window).scroll(function () {
    if(jQuery(this).scrollTop() > startY ){
        jQuery('#nav-container').slideDown();
    }else{
        $('#nav-container').css({display: 'block'});
        jQuery('#nav-container').slideUp();
    }
});
});
</script>

CSS：

#nav-container {
    position: fixed;
    height: 50px;
    width: 100%;
    min-width: 600px;
    display: none;
}

任何帮助将不胜感激，谢谢大家。

另外，这是我第一次玩 JQuery 和 JS，所以请善待。

修复后的最终版本：

<script type="text/javascript">
$(document).ready(function() {
var startY= $('#home').position().top + $('#home').outerHeight();
var navc = $('#nav-container')
navc.html( $('#nav').html());
$(window).scroll(function () {
    if($(this).scrollTop() > startY ){
        navc.slideDown();
    }else{
        navc.slideUp();
    }
});
});
</script>

Answer 1

因为您在每次滚动页面时都会触发的 .scroll() 函数中，因此它将进入您的 else 条件并每次都显示导航栏，因为这条线：

$('#nav-container').css({display: 'block'});

删除此行，它应该可以按预期工作。

Answer 2

您需要检查 navBar 是否显示，并且仅在状态正确时才运行 scroll() 函数。像这样的：

    if(jQuery(this).scrollTop() > startY && $("#nav-container").css('display') == "none" ){
        jQuery('#nav-container').slideDown();
    }else if( && $("#nav-container").css('display') == "block"){
        $('#nav-container').css({display: 'block'});
        jQuery('#nav-container').slideUp();
    }