Как объединить 2 кода JavaScript в одном? - PullRequest
Новая
       26

Как объединить 2 кода JavaScript в одном?

0 голосов
/ 24 апреля 2019

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

1 Ответ

2 голосов
/ 24 апреля 2019

Проблема 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");
  }
});
...