Question

我一直在互联网上查找滚动时隐藏菜单的vanilla Javascript实现 - 并找到了这个解决方案：

var previousScroll = window.pageYOffset;    
window.addEventListener( 'scroll', hideMenu );

function hideMenu() {
  var menubar = document.querySelector('.navigation');
  var currentScroll = window.pageYOffset;

  if ( currentScroll > previousScroll) {
    menubar.style.transform = "translateY(-60px)";
  }

  else {
    menubar.style.transform = "";
  }

  previousScroll = currentScroll;

}

我不明白的是，为什么会这样？为什么变量“previousScroll”值可能与“currentScroll”值不同？

我试图将previousScroll放在函数hideMenu中，但它不起作用。

Answer 1

执行滚动后调用函数hideMenu()。因此，windows.pageYOffset会在滚动后返回Y位置，而previousScroll则是<之前滚动。

这就是为什么它鞭打;）

以下是如何逐步运作的：

第1步（已加载页面）

previousScroll =＆gt; 0（页面顶部）
pageYOffset =＆GT; 0（即时Y. 窗口滚动位置）
currentScroll =＆gt; ??

第2步（滚动）

previousScroll =＆gt; 0（无变化）
页面正在滚动（'scroll'事件被触发）
pageYOffset =＆gt; 100（即时Y窗口滚动位置）
'scroll'回调函数被调用（此处为hideMenu()）
更新currentPosition（= pageYOffset = 100）
更新previousPosition（现在等于currentPosition）
....

查看此jsFiddle

Answer 2

用户滚动时会调用hideMenu函数。因此，我们可以访问页面中的当前pageYOffset。

在滚动之前我们无法知道我们在哪里。也就是说，除非我们在“滚动”之前保留对它的引用。事件发生了。

如果您将变量放在函数中，则previous和current将返回相同的值，我们无法比较它们。

Answer 3

currentScroll会更新。它表示当前的滚动偏移量。
如果用户向下滚动（currentScroll > previousScroll），我们决定隐藏菜单栏。否则我们会重置其位置。
最后，我们更新previousScroll以保留下一个hideMenu函数调用的最后滚动位置（步骤1到3）

为什么滚动隐藏菜单/导航有效？

3 个答案: