Есть блок для мобильных устройств, который открывается / закрывается с помощью плагина 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>