如何将 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 点在每个卷轴上被重置：

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

在这种情况下，悬停代码不仅会改变 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");
  }
});

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

How to combine 2 javascript codes in one?

javascript

jquery

scroll

combinations

visibility