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%)隐藏标题，而不是使用像素值，因此即使标题高度发生变化，它仍然可以正常工作。

下面的快速演示：

＆＃13;

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

＆＃13;

.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 */

＆＃13;

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

＆＃13;

您还可以做更多事情，例如更改滚动标题颜色（例如Poppulo's website）或甚至使用不同的动画（请参阅Headroom.js playroom）。

Answer 2

更新，经过一些试验和错误，我设法让它发挥作用。我添加了第二个条件，在向上滚动时隐藏菜单栏。我添加了这部分： if（（st＆gt; lastScrollTop） ||（$（this）.scrollTop（）＆lt; 500））{ 这是导航栏从顶部以500像素隐藏的条件。

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

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

2 个答案: