Блог

Я каким-то образом собрал 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");
});
  

Проблема 1: при прокрутке вниз навигация исчезает = и это здорово. Но как только вы снова прокручиваете вверх, он больше не появляется.

Это потому, что zero точка сбрасывается при каждой прокрутке:

 zero = $(window).scrollTop();
  

поскольку вы хотите, чтобы это было только вверху, нет необходимости сбрасывать нулевую точку.

Также существует проблема с вызовом .css , который при таком использовании принимает только 2 аргумента — поэтому 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");
  }
});