jquery - jquery 悬停功能适用于向上滚动和向下滚动，尽管在一部分中使用

Question

我有一些 jquery 代码可以检测悬停/取消悬停并将导航栏移入/移出视图，这个想法是只有当最后一个滚动是向下滚动时才会发生这种情况，所以我检查最后一个滚动是什么并使用 if 语句确定是否运行悬停。问题是无论最后滚动方向是什么，悬停代码都在运行。

我显然在这里做错了什么，任何帮助将不胜感激。

这是我的jQuery代码：

var lastScrollTop = 0;
$(window).scroll(function(event) {
  var st = $(this).scrollTop();
  if (st > lastScrollTop) {
    $("nav").hover(function() {
      var header = document.querySelector('nav');
      header.style.transform = 'translateY(0px)'
      header.style.opacity = '100%'
    }, function() {
      var header = document.querySelector('nav')
      header.style.transform = 'translateY(80px)'
      header.style.opacity = '40%'
    });
    console.log("down");
  } else {
    console.log("up");
  }
  lastScrollTop = st;
});

Answer 1

你可以这样写代码。在滚动事件中，您检查 'nav' 的 'offsetTop'。然后检查窗口'pageYOffset'的条件，如果更大意味着用户向下滚动。

我相信这就是你想要的：

window.onscroll = function() {myFunction()};

var navbar = document.querySelector("nav");
var navTop = navbar.offsetTop;

function myFunction() {
    if (window.pageYOffset >= navTop) {
        navbar.style.transform = 'translateY(80px)';
        navbar.style.opacity = '40%';
    } else {
        navbar.style.transform = 'translateY(0px)';
        navbar.style.opacity = '100%';

    }
}