javascript - 如何将 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

Problem 1: When you're scrolling down, the navigation disappears = which is great. But as soon as you scroll up again, it doesn't appear anymore.

这是因为每次滚动时都会重置零点:

zero = $(window).scrollTop();

由于您只想将其设置在顶部，因此无需重置零点。

调用 .css 也存在一个问题，在这种用法下，它只需要 2 个参数 - 因此第二个参数需要根据滚动位置为“0”或“1”，给予:

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

Problem 2: the nav disappears forever, when I hover once on the nav

在这种情况下，悬停代码不仅会更改不透明度，还会更改可见性 - 因此滚动会更改不透明度，但不会更改可见性，从而使它是看不见的。

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

$('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");
  }
});