Question

当前首次尝试使用javascript。我试图制作一个简单的导航栏，当用户向下滚动时，导航栏消失；当用户向上滚动时，其重新出现；当鼠标移入或移出导航栏区域时，导航栏也一样。好消息！做到了这一点。

当我然后向上滚动以使导航栏出现时，麻烦就来了，我移动鼠标单击它，然后很明显，hotspot之外的鼠标触发了鼠标事件并使导航栏在途中消失。当我将鼠标置于顶部时，它确实会重新出现，但我希望它在滚动向上使其显示时停留在该位置。

我有两个if语句，一个用于滚动，一个用于鼠标位置。我想使网站prioritise的滚动if语句优于鼠标if语句。

这是我读了很多文章后写的代码：

// Hide nav when scrolling down, show nav when scrolling up
var scrollCtrl = false;
var navbar = document.getElementById("navbar");
var prevScrollPos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
    if (prevScrollPos > currentScrollPos) {
      navbar.classList.add('show');
      var scrollCtrl = true;
    } else {
      navbar.classList.remove('show');
      var scrollCtrl = false;
    }
  prevScrollPos = currentScrollPos;
}

// Get the height of the nav bar
var navHeight = getComputedStyle(document.getElementById("navbar")).height;
navHeight = navHeight.substring(0, navHeight.length -2);
navHeight = parseInt(navHeight, 10);

// Show nav when mouse is at the top
window.addEventListener('mousemove', function(e) {
  var ypos = e.y;
  if (ypos <= navHeight && scrollCtrl == false) {
    navbar.classList.add('show')
  }
  else {
    navbar.classList.remove('show')
  }
});

我试图做的是使用一个名为scrollCtrl的布尔值（因为我希望滚动条可以控制鼠标的位置），但是无论我进行什么调整，我似乎都无法理解它可以正常工作。

显示/隐藏类只是CSS转换。

我对javascript还是很陌生，所以请原谅任何虚假的礼节！

如何“优先”使用香草javascript if语句？

0 个答案: