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

debugcn 发表于 Dev

JSK

我正在尝试将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 /

姆德斯杰夫

无需插件，这是一个 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>标签之前。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。