Javascript：导航栏在向上滚动并到达顶部时消失

Question

我已经在我的网站上创建了一个导航栏（仍在开发中）。 访客向上滚动时，将显示此导航栏。 但是，导航栏一直保持到顶部。 在顶部，我有原始菜单，因此也需要导航栏。

我要实现的是，只要访客到达某个点，菜单栏就会消失，例如点击div就会消失。 到目前为止没有运气。 我使用-70px（位置：固定）将导航栏放置在视口之外，并通过Javascript在访问者向上滚动时显示。

这是导航栏的Javascript：

var lastScrollTop = pageYOffset || document.documentElement.scrollTop;

window.addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
// Scroll Down

$('.navbar').css({
   "transform": "translate3d(0,-70px,0)"
});

} else {
 // Scroll Up

$('.navbar').css({
   "transform": "translate3d(0,70px,0)"
});
}
   lastScrollTop = st;
}, false);

在使某个div向上滚动时，使导航栏消失的任何帮助将不胜感激。 提前致谢！

这是我最近得到的，请参见下文。 基本上，它可以满足我的需要（在特定区域中禁用导航栏，在这种情况下，离底部350px）。 我只需要它成为顶部，而不是底部。

$(window).scroll(function() {
var pxFromBottom = 350;
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
$('.navbar').css({
  "transform": "translate3d(0,-70px,0)"
});
} 
});

Answer 1

您可以使用Headroom.js进行此操作。 它是一个轻量级（2KB）的高性能JS小部件（无依赖项！），可让您根据用户的滚动来更改类。

我建议您使用translateY(-100%)来隐藏标题，而不要使用像素值，因此即使标题高度发生变化，它仍然可以正常工作。

下面的快速演示：

 var header = document.querySelector('.header'); var headroom = new Headroom(header, { "offset": 200, "tolerance": 5, "classes": { "unpinned": "header--unpinned" } }); headroom.init(); 

 .header { position:fixed; top: 0; left: 0; right: 0; padding: 2rem; color: white; background: black; transition: all .4s cubic-bezier(.770,0,.175,1); } .header--unpinned { transform: translateY(-100%); } /* Demo purposes only */ body { height: 2000px; margin: 0; } p { padding: 2rem; } /* Demo purposes only */ 

 <script src="https://unpkg.com/headroom.js"></script> <header class="header">Header</header> <!-- Demo purposes only --> <p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p> <!-- Demo purposes only --> 

您可以做更多的事情，例如更改滚动条上的标题颜色（例如Poppulo的网站 ），甚至使用不同的动画（请参见Headroom.js playroom ）。

Answer 2

更新：经过一些尝试和错误，我设法使其正常工作。 我添加了第二个条件，该条件在向上滚动时会隐藏菜单栏。 我添加了这一部分：if（（st> lastScrollTop） ||（$（this）.scrollTop（）<500））{这是导航栏在距顶部500 px处隐藏的条件。

var lastScrollTop = pageYOffset || document.documentElement.scrollTop;

window.addEventListener("scroll", function() {
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if ((st > lastScrollTop) || ($(this).scrollTop() < 500)) {
    // Scroll Down
    $('.navbar').css({
      "transform": "translate3d(0,-70px,0)"
    });
  } else {
    // Scroll Up
    $('.navbar').css({
      "transform": "translate3d(0,70px,0)"
    });
  }
  lastScrollTop = st;
   }, false);