@mxbeat

Как добавить fadein в jQuery?

Доброго времени суток! Подскажите, есть маленький скрипт, который добавляет класс .fixed к меню, чтобы оно прилипало при прокрутке, как правильно прописать fadein и fadeout, чтобы это происходило с анимацией?

Скрипт: https://codepen.io/maxbeat/pen/KKpNvwY

$(document).ready(function($){
    var navPos, navHeight;
    function refreshVar() {
      navPos = $('.menu').offset().top; // определяем положение блока меню
      navHeight = $('.menu').outerHeight(true); // определяем высоту меню
    }
    refreshVar();
    $(window).resize(refreshVar);
      $('<div class="clone-menu"></div>').insertBefore('.menu').css('height', navHeight).hide(); // вставляем перед меню блок с такой же высотой и прячем его
    $(window).scroll(function() {
      if ($(window).scrollTop() > 300) { // при прокрутке больше 300px
        $('.menu').addClass('fixed');  // добавляем меню класс .fixed
        $('.clone-menu').show(); // отображаем клон блока меню
      }  
      else {
        $('.menu').removeClass('fixed');
        $('.clone-menu').hide();
      }
    });
    });
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
Prynik
@Prynik
[Middle] Frontend developer
Лучше добавьте в класс fixed анимацию. Или добавьте второй класс с анимацией. (Анимация css это @keyframes :)

А вообще вместо show и hide добавляете fadein и fadeout
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы