Как показывать меню только во время прокрутки страницы

У меня на сайте есть одно правильное меню. На мобильных и небольших устройствах правое меню перекрывает содержимое.

Я пытаюсь скрыть правое меню, когда страница была стабильной. Когда пользователь прокручивает, должно появиться меню. Если прокрутка останавливается, мне также нужно скрыть меню. Мне нужно только при прокрутке показывать.

Обычно мы используем следующую функцию, а не любые другие решения моей проблемы:

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.a').fadeIn();
  } else {
    $('.a').fadeOut();
  }
});

Я нашел другое решение для этого ..

 $(window).scroll($.debounce( 250, true, function(){
            $('.icon-bar-left').show();
            $('.icon-bar-right-arrow').hide();
        } ) );
«Если прокрутка останавливается, мне также нужно скрыть меню. Мне нужно только показать это во время прокрутки ». - значит, пользователи должны активировать любой из пунктов меню одновременно с прокруткой сайта, тогда…? Интересно, как это должно работать?
CBroe 11.04.2018 12:14

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

Alexander Z 11.04.2018 12:26

Нашли какой-то код из сети $ (window) .scroll ($. Debounce (250, true, function ()) {$ ('. Icon-bar-left'). Show (); $ ('. Icon-bar-right -стрелка '). hide ();}));

krish 12.04.2018 08:27
0
3
180
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваше решение неверное. Сделайте значок меню (полосы) и покажите значение по умолчанию для нужных вам разрешений, например:

@media only screen and (max-width: 600px) {
   .menu {
        display: none
    }
    .menu-icon {
      display: block;  
    }
}
@media only screen and (min-width: 600px) {
   .menu {
        display: block;
    }
    .menu-icon {
      display: block;  
    }

}

А с JS поместите событие для значка и переключите меню. После того, как пользователь щелкнет элемент в меню, меню свернется.

Это стандартный способ реализовать адаптивное меню.

Попробуйте этот код или проверьте его на этот Codepen

JS:

$(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
    $('.menu').addClass('visible');
  } else {
    $('.menu').removeClass('visible');
  }
});

CSS:

.menu {
  position:fixed;
  top:0;
  opacity:0;
}
.menu.visible {
  opacity:1;
}

Конечно, вам также нужно использовать медиа-запросы в вашем CSS, но пока я просто хочу помочь с JS и дать вам идею использовать класс «visible».

Ответ принят как подходящий
$(window).scroll($.debounce( 250, true, function(){ $('.icon-bar-left').show(); $('.icon-bar-right-arrow').hide(); } ) );

Это было найдено в Интернете, и все работает нормально ..

Другие вопросы по теме