Question

我想使用jquery滚动下拉导航栏。我之前有一个负值的余量让它坚持到顶部然后它向上滑而不是向下滑动，当值不是负时，我的导航栏dsnt坚持到顶部，我怎么能让它工作？

＆＃13;

// 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();
        }
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

我应该使用＆＃34; nav＆＃34;在jquery或#header中切换或者它是否重要？

Answer 1

您的代码包含一些问题：

$("#header").slideToggle("slow");。这意味着如果您的标题被隐藏，它将会显示，但如果它是可见的，它将被隐藏。
您的HTML包含一些问题。例如<nav>。这个标签永远不会关闭？
为了改善加载时间，最好在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 2

在代码中 slideToggle(); 的问题，当你向上滚动100个标题切换时，每个滚动都会向上和向下滑动..所以你应该使用slideDown();并使用{ {1}}代替fadeOut() ..我认为最好使用FadeOut()

slideUp();

DEMO

Answer 3

我确定这些提示确实有效，但由于某些原因它在我的代码中没有用，所以也许我的CSS中有问题吗？

[my css.html.jquery]

http://jsfiddle.net/e19dvqpm/

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

3 个答案: