Блог

Главная - Вопросы по программированию - Исправлена панель навигации, которая исчезает, когда не находится сверху и не прокручивается, не работает должным образом

Исправлена панель навигации, которая исчезает, когда не находится сверху и не прокручивается, не работает должным образом

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать панель навигации, которая обычно отображается, когда window.pageYOffset она меньше 500, в противном случае она будет отображаться во время прокрутки и скрываться через 1200 миллисекунд после того, как пользователь прекратит прокрутку. Вот мой CodePen https://codepen.io/youssefwael/pen/LYZKmom и в нижней части js вы увидите ту часть, на которой я застрял

 document.addEventListener("scroll", () => {
    nav.style.display = "block";
    clearTimeout(hide);
    if (window.pageYOffset > 500) {
        const hide = setTimeout(() => {
            nav.style.display = "none";
        }, 1200);
    }
});

Что я здесь делаю не так? Я пытался разобраться в этом со вчерашнего дня, потому что чувствую, что это действительно должно сработать. В настоящее время, если вы быстро прокручиваете вверх и вниз, время ожидания истекает. Кроме того, прокрутка снизу вверх быстро приводит к исчезновению панели навигации вверху, чего не должно быть. Я думал, что добавление clearTimeout() исправит оба из них, но это не так.

Заранее спасибо.

Ответ №1:

Для поведения прокрутки я внес некоторые изменения в ваш прослушиватель событий, вот упрощенная версия:

 const myNavbar = document.querySelector(".navbar__menu");

document.addEventListener("scroll", () => {
    if (window.pageYOffset > 500) {
      myNavbar.classList.add("navbar-fixed");
      myNavbar.classList.remove("navbar-relative");
    }
  else if (window.pageYOffset < 500) {
      myNavbar.classList.add("navbar-relative");
    myNavbar.classList.remove("navbar-fixed");
    }
});

вы можете просто использовать относительный или фиксированный стиль для панели навигации на основе этих классов.
В вашем коде также есть ошибка, поскольку переменная hide недоступна за пределами ее области видимости

Комментарии:

1. Мне нравится, как работает это решение, но на самом деле оно не достигает того, что я пытаюсь сделать. Моя главная проблема в том, что я очень запутался в том, как clearTimeout() это работает. Знаете ли вы, как я мог бы правильно настроить ее, чтобы при каждом запуске функции она отменяла тайм-аут, установленный в последний раз, когда это было? Я надеюсь, что это имеет смысл.

2. @Youssef Я бы хотел помочь вам с этим, но я немного занят, вы можете вызвать функцию для события, связанного с прокруткой, которая сбросит ваш тайм-аут и другое событие, которое будет определять, что пользователь не прокручивает, и оно начнет тайм-аут

Ответ №2:

Я нашел проблему, поэтому я опубликую ее здесь для будущих пользователей, которые могут столкнуться с той же проблемой. Все, что мне нужно было сделать, это объявить hide вне функции, и теперь это творит чудеса.

 let hideNav;
document.addEventListener("scroll", () => {
    nav.style.display = "block";
    clearTimeout(hideNav);
    if (window.pageYOffset > 500) {
        hideNav = setTimeout(() => {
            nav.style.display = "none";
        }, 1200);
    }
});

PS: я не знаю, как закрыть этот вопрос.

Метки: