0

На сайте, есть мобильное меню (в моб версии) при скролле вниз, он липнет к верху и этот переход происходит очень резко, как добавить планость этому процессу, чтобы при скролле меню плавно занимало вверх?

Мое предположение, что реализовывается это на js или jquery

Скрин про какое меню идет речь:

введите сюда описание изображения

Код js который отвечает за эффект липкого меню:

$(function(){
  $(window).scroll(function() {
      if($(this).scrollTop() >= 1) {
$('.sticky').addClass(' sticky-menu ');
}
else{
$('.sticky').removeClass(' sticky-menu ');
      }
});

Ну и собственно классы которые добавляет этот код:

  .sticky {
    z-index: 9999999;
    border-bottom: 1px solid #ccc;
    width: 100%;
  }
    

.sticky-menu {
    position: fixed;
    top: 0;
}

1 ответ 1

1

Как вариант, попробуй на CSS

.sticky-menu {
   //top: 0; // удали
   transform: translateY(-100px); // это магическое число, равное отступу от верха страницы до оранжевого навбара ( вот его как раз и нужно вычислить с помощью JS и подставить )
}
.mob-menu__block {
  transition: 0.1s ease;
}
1
  • Проделал на локалке, работает шикарно, огромные Вам спасибо! Commented 9 июл. 2020 в 12:54

Ваш ответ

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

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