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

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

在您的代码中，slideToggle(); 的问题在您滚动超过 100 时 header 每次滚动都会上下滑动。所以您应该使用 slideDown(); 并使用 fadeOut() 而不是 FadeOut() .. 我认为最好使用 slideUp();

// fade in .navbar
$(function () {
    // hide .navbar first
    $("#header").hide();
    $(window).scroll(function () {
        // set distance user needs to scroll before we start fadeIn
        if ($(this).scrollTop() > 100) {
            $("#header").slideDown("slow"); //you can use fadeIn();
        } else {
            $("#header").slideUp('slow'); // you can use fadeOut();
        }
    });
});

DEMO

Answer 2

您的代码存在一些问题：

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

这是一个（新的）工作示例：

$(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>

Answer 3

我确定这些提示确实有效，但由于某种原因它在我的代码中不起作用所以可能我的 css 有问题？

[my css.html.jquery]

http://jsfiddle.net/e19dvqpm/

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

my navbar goes up instead of down

css

jquery

nav

navigationbar