javascript - 使用 Headroom JS 在滚动时隐藏导航栏并在需要时显示

Question

我正在尝试将 Headroom.js 用于我的导航栏，但我在使用它时遇到了一些困难。

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

CSS:

.headroom {
transition: transform 200ms linear;}

.headroom--pinned {
transform: translateY(0%);}

.headroom--unpinned {
transform: translateY(-100%);}

header.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out; z-   index: 9999;}
header.headroom--unpinned {top: -75px;z-index: 9999;}
header.headroom--pinned {top: 0; z-index: 9999;}


nav{
margin:0;
padding:0px;
text-align:center;
background-color: #ffffff;
border-bottom: 2px solid #d5dbdb;
width: 100%;
height: 60px;
position: fixed;
z-index: 9999;
clear: both;
top:0;
opacity: 0.9;}

JS - 我已经在我的 HTML 中链接了 headroom.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>

我不确定我做错了什么，任何意见或反馈将不胜感激(Y)您可以在此处查看我尝试使用(并遵循)的来源 - http://wicky.nillia.ms/headroom.js/

Answer 1

不需要插件，这里有一个 FIDDLE

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

*注意:将脚本放在</body>之前标签。