如何将 2 个 javascript 代码合二为一？

Question

我以某种方式组装了 2 个单独的代码（绝对是初学者）并尝试将两个代码块合二为一。

我尝试了以下操作：当我向下滚动时，导航应该被隐藏，当我向上滚动时，它应该再次出现。

附加：只要将鼠标移到它上面（.nav-visibility），导航应该会再次出现并在鼠标移出时再次消失。 -> 但前提是您向下滚动！

问题：当您向下滚动时，导航消失 = 这很棒。但是一旦你再次向上滚动，它就不再出现了。

var zero = 0;
$(document).ready(function() {
  $(window).on('scroll', function() {
    $('.nav-visibility').css("opacity", "0", $(window).scrollTop() >
      zero);
    zero = $(window).scrollTop();
  })
})

$('nav').mouseover(function() {
  $('.nav-visibility').css("opacity", "1");
  $('.nav-visibility').css("visibility", "visible");
});

$('nav').mouseout(function() {
  $('.nav-visibility').css("opacity", "0");
  $('.nav-visibility').css("visibility", "hidden");
});

Answer 1

问题 1：当您向下滚动时，导航消失 = 这很棒。但是一旦你再次向上滚动，它就不再出现了。

这是因为每次滚动都会重置zero 点：

zero = $(window).scrollTop();

因为您只希望它位于顶部，因此无需重置零点。

对.css 的调用也存在问题，在这种用法下，它只需要 2 个参数 - 所以第二个需要根据滚动位置为“0”或“1”，给出：

$(document).ready(function() {
  $(window).on('scroll', function() {
    $('.nav-visibility').css("opacity", $(window).scrollTop() > 0 ? "0" : "1");
  })
})

问题 2：当我在导航上悬停一次时，导航永远消失

在这种情况下，悬停代码不仅会更改opacity，还会更改visibility - 因此滚动会更改不透明度，但不会更改可见性，使其不可见。

根据您的要求，您可以删除可见性部分，以便滚动和悬停进行相同的更改：

$('nav').mouseover(function() {
  $('.nav-visibility').css("opacity", "1");
});

$('nav').mouseout(function() {
  $('.nav-visibility').css("opacity", "0");
});

当然，如果您在顶部取消悬停，它也会消失，因此您可以添加该检查：

$('nav').mouseout(function() {
  if ($(window).scrollTop() > 0) {
    $('.nav-visibility').css("opacity", "0");
  }
});