jQuery hover功能无论上下滚动均触发，仅向下滚动生效如何解决

问题根因 #

你的代码核心问题是事件绑定是永久累加的：只要触发过一次向下滚动，hover事件就会被绑定到nav元素上，后续哪怕滚动方向变为向上，已经绑定的事件也不会自动移除，因此无论滚动方向如何，hover逻辑都会触发。
另外scroll事件触发频率极高，每次向下滚动都重复绑定hover事件，还会导致内存泄漏，同一个hover逻辑会被重复执行多次。

修复方案 #

不要在scroll回调中绑定事件，把hover事件绑定提到全局，单独用变量存储最近一次滚动方向，hover触发时先判断方向再执行对应逻辑即可，修复后代码如下：

var lastScrollTop = 0;
var isLastScrollDown = false; // 存储最近一次滚动方向标识

// hover事件全局仅绑定一次
$("nav").hover(function() {
  // 仅最后一次为向下滚动时，执行导航展示逻辑
  if (isLastScrollDown) {
    $(this).css({
      'transform': 'translateY(0px)',
      'opacity': '100%'
    });
  }
}, function() {
  if (isLastScrollDown) {
    $(this).css({
      'transform': 'translateY(80px)',
      'opacity': '40%'
    });
  }
});

$(window).scroll(function() {
  var st = $(this).scrollTop();
  // scroll回调仅更新滚动方向标识，不做事件绑定
  isLastScrollDown = st > lastScrollTop;
  console.log(isLastScrollDown ? "down" : "up");
  lastScrollTop = st;
});

可选优化 #

如果你需要向上滚动时导航栏固定展示、不需要hover触发，可以在scroll的向上滚动分支补充导航状态重置逻辑：

$(window).scroll(function() {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    isLastScrollDown = true;
    console.log("down");
  } else {
    isLastScrollDown = false;
    // 向上滚动时直接固定展示导航
    $("nav").css({
      'transform': 'translateY(0px)',
      'opacity': '100%'
    });
    console.log("up");
  }
  lastScrollTop = st;
});

内容的提问来源于stack exchange，提问作者Random34544