2

Есть блок для мобильных устройств, который открывается / закрывается с помощью плагина Toggler(Foundation).
Хочу сделать, чтобы блок скрывался не только по клику на кнопку, как сейчас, но и при скролле (или при клике вне блока). Сейчас, когда начинаешь скролить,- блок дергается и не всегда скрывается.
Как исправить баг, может выбрать другое событие?
Ниже пример для визуального отображения подергивания, код в проекте другой. (Воспроизвести его через сниппет не получилось)
Закрываю блок с помощью метода плагина.

    $(window).scroll(function() {
       let menuStatus = $('#js-mobile-menu').attr('aria-expanded');
       if( menuStatus === 'true') {
          $('#js-mobile-menu').foundation('toggle');
       }
});

$('#js-toggle-panel').click(function() {
  $('.callout').toggleClass('active');
});
$(window).scroll(function() {
  $('.callout').toggleClass('active');
});
.block {
  height: 800px;
  padding: 5rem
}

.row {
  display: flex;
  background-color: #f7f7f7;
  position: relative;
  height: 50px;
}

.callout {
  //display: none;
  position: absolute;
  top: -500px;
  left: 0;
  right: 0;
  background-color: #fefefe;
  z-index: 5;
  padding: 1rem;
  transition: all .45s;
}

.callout.active {
  //display: block;
  top: calc(100% + 1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="block">
  <div class="row">
    <p><a id="js-toggle-panel">Toggle Panel</a></p>

    <div class="callout">
      <h4>Hello!</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
    </div>
  </div>
</div>

2 ответа 2

1

Когда колесо крутится, возникает множество событий scroll. Нужно прикрутить throttle/debounce, чтобы закрывание срабатывало один раз.

1

Уважаемый, toggleClass меняет один на другой или добавляет и убирает, получается, что во время scroll без условия ты постоянно меняешь class, из того, что я понял, тебе просто надо во время scroll addClass добавлять КЛАСС, а кликом удалять класс removeClass

$('.callout').click(function() {
  return false;
  event.preventDefault();

});
$(window).scroll(function() {
  $('.callout').addClass('active');
});

$(window).click(function() {
  $('.callout').removeClass('active');
});
.block {
  height: 800px;
  padding: 5rem
}

.row {
  display: flex;
  background-color: #f7f7f7;
  position: relative;
  height: 50px;
}

.callout {
  //display: none;
  position: absolute;
  top: -500px;
  left: 0;
  right: 0;
  background-color: #fefefe;
  z-index: 5;
  padding: 1rem;
  transition: all .45s;
}

.callout.active {
  //display: block;
  top: calc(100% + 1px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="block">
  <div class="row">
    <p><a id="js-toggle-panel">Toggle Panel</a></p>

    <div class="callout">
      <h4>Hello!</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quas optio alias voluptas nobis iusto mollitia asperiores incidunt reprehenderit doloribus voluptatibus officiis minus, inventore, quasi nisi. Consequuntur, quidem. Sint, dicta?</p>
    </div>
  </div>
</div>

3
  • Думаю, что скрипт немного дополнить нужно. Функция по клику остается с .toggleClass и по скролу нужно добавить событие с удалением класса при клике за пределами блока. 29 янв 2018 в 12:23
  • @AlexeyGiryayev, если функцию по клику оставить .toggleClass так он же по клику будет выскакивать туда суда, он вроде хотел что бы блок появлялся по скролу? или я что то не так понял?
    – Air
    29 янв 2018 в 13:16
  • тут в вопросе вроде было сказано "Хочу сделать, чтобы блок скрывался не только по клику на кнопку, как сейчас, но и при скролле (или при клике вне блока)." Или же суть вопроса в том, что ему нужен банально .toggleClass при клике и .removeClass при скролле. 29 янв 2018 в 14:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.