Question

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

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

其他：一旦将鼠标移到它上面（.nav可见性），导航将再次出现，并在鼠标移出时再次消失。 ->但前提是您已向下滚动！

问题：向下滚动时，导航消失=很棒。但是，一旦您再次向上滚动，它便不再显示。

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

如何将2个JavaScript代码合而为一？

1 个答案: