使用Headroom JS来隐藏导航条，并在需要时显示

Using Headroom JS to hide navbar on scroll and appear when needed

本文关键字：显示 JS Headroom 隐藏 导航 使用      更新时间：2023-09-26

我试图使用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 -我已经链接了headroom.js文件和jQuery文件在我的HTML: 

<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>标签之前

相关文章：