jquery - 我的导航栏上升而不是下降

Question

我想使用 jquery 在滚动条上创建一个下拉导航栏。之前我在负值上留有余量以使其粘在顶部但后来它向上滑动而不是向下滑动并且当值不是负值时，我的导航栏 dsnt 粘在顶部，我怎样才能让它工作？

// hide .navbar first
$("#header").hide();

// fade in .navbar
$(function () {
    $(window).scroll(function () {

             // set distance user needs to scroll before we start fadeIn
        if ($(this).scrollTop() > 100) {
            $("#header").slideToggle("slow");
        } else {
            $("#header").fadeOut();
        }
    });
});

#header {
   position:fixed;
   z-index:4;
   margin-top: -55px;
   padding-top:50px;
   width: 100% 
}

<div id="header">here i have a <nav> and some buttons</div>

我应该在 jquery 或 #header 中使用“nav”进行切换还是重要？

Answer 1

您的代码包含一些问题:

• $("#header").slideToggle("slow");每次滚动时运行。这意味着如果您的 header 被隐藏，它就会出现，但如果它是可见的，它将被隐藏。
• 您的 HTML 包含一些问题。 <nav>例如。这个标签永远不会关闭？
• 要缩短加载时间，最好在您的 css 而不是 JQuery 文件中隐藏 header 。

这是一个(新的)工作示例:

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $("#header").slideDown("slow");
  } else {
    $("#header").slideUp('slow');
  }
});

body {
  height: 2000px;
  margin: 0px;
}
#header {
  background: red;
  position: fixed;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="header">Header</div>