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()函数内部，每次滚动页面时都会触发它，它会转到你的其他状态并且每次都显示导航栏，因为这行：

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

导航条在滚动条上出现并消失

2 个答案: