Javascript 使用净空JS隐藏滚动上的导航栏，并在需要时显示

我正在尝试使用headloom.js作为我的导航栏，但是我在让它工作时遇到了一些困难

（向下滚动时，净空JS应隐藏标题和嵌套导航，但在需要时显示）

我不知道我错在哪里，因为我还是一个使用javascript的初学者，所以我为我的简短道歉

我的HTML设置如下：

<!-- initially -->
<header class="headroom">

<!-- scrolling down -->
<header class="headroom headroom--unpinned">

<!-- scrolling up -->
<header class="headroom headroom--pinned">

<header id="header" class="header header--fixed hide-from-print" role="banner">
  <nav>   
  </nav>
</header>
</header>
</header>
</header>

JS-我在HTML中链接了headloom.JS文件和jQuery文件：

<script type="text/javascript" src="js/headroom.js"></script>

我还在页面底部添加了一些脚本：

<script>
(function() {
var header = document.querySelector("#header");
if(window.location.hash) {
  header.classList.add("slide--up");
}

  new Headroom(header, {
    tolerance: {
      down : 10,
      up : 20
    },
    offset : 205,
    classes: {
      initial: "slide",
      pinned: "slide--reset",
      unpinned: "slide--up"
    }
}).init();

}());
</script>

（功能（）{
var header=document.querySelector（“#header”）；
if（window.location.hash）{
header.classList.add（“向上滑动”）；
}
新净空（收割台、{
公差：{
下降：10，
最多：20
},
抵销：205，
课程：{
首字母：“幻灯片”，
锁定：“滑动-重置”，
取消固定：“向上滑动”
}
}).init（）；
}());

我不确定我到底做错了什么，任何意见或反馈都将不胜感激（Y）

---

您可以在这里查看我试图使用（并遵循）的源代码-

不需要插件，这里有一个

---

（函数（$）{
var-ost=0；
$（窗口）。滚动（函数（）{
var cOst=$（this.scrollTop（）；
如果（成本>200&&cOst>ost）{
$（'header'）.addClass（'fixed'）.removeClass（'default'）；
}
否则{
$（'header'）.addClass（'default'）.removeClass（'fixed'）；
}
ost=成本；
});
})（jQuery）；

---

*注意：将脚本放在

标记的前面。

谢谢您（Y）！！只有一个问题，就是有没有一种方法可以在JS更改类之前，在页面向下滚动的像素数上设置一个标记。例如，如果页面意外向下滚动了一个像素，导航栏甚至在页面顶部也会消失，这会留下一个空间。是的，将

if（cOst>ost）{

替换为

if（cOst>200&&cOst>ost）{

，200表示200px，根据需要将其更改为任何值。哦，我明白了，谢谢！让导航栏重新出现（类别固定）当向上滚动100px时，是否需要在else语句之后应用类似的行@mdesdev@mdesdev：遗憾的是，您的解决方案不适用于IE11如果有人在Chrome中的

fixed

position元素上遇到起伏或跳跃的动画，请将这些添加到CSS中，用于固定项目：

-webkit backface visibility:hidden；-webkit transform:translateZ（0）；

我使用jQuery设置标题高度的动画，以避免出现起伏的动画，在使用FlexBox时效果很好。

<script>
(function() {
var header = document.querySelector("#header");
if(window.location.hash) {
  header.classList.add("slide--up");
}

  new Headroom(header, {
    tolerance: {
      down : 10,
      up : 20
    },
    offset : 205,
    classes: {
      initial: "slide",
      pinned: "slide--reset",
      unpinned: "slide--up"
    }
}).init();

}());
</script>

<header class="default">


</header>

header {
  background: #444;
  position: fixed;
  left: 0;
  width: 100%;
  height: 80px;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.default {
  top: 0;
}
.fixed {
  top: -80px;
}

<script>
  (function($) {
    var ost = 0;
    $(window).scroll(function() {
      var cOst = $(this).scrollTop();

      if(cOst > 200 && cOst > ost) {
         $('header').addClass('fixed').removeClass('default');
      }
      else {
         $('header').addClass('default').removeClass('fixed');
      }

      ost = cOst;
    });
  })(jQuery);
</script>