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>标记之前。

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

1 个答案: