Animate переключил верхнюю панель с фиксированным верхом - PullRequest
0 голосов
/ 07 мая 2018

Используя mdbootstrap, у меня есть navbar:

<nav class="navbar navbar-expand-lg white">

И это позиционируется так: enter image description here

Во время прокрутки я добавляю класс 'fixed-top' к панели навигации с помощью этого скрипта:

let nav = $('.navbar').offset().top;
$(window).bind('scroll', function () {
    if  ($(window).scrollTop() >= nav)  {
        $('.navbar').addClass('fixed-top');
    } else {
        $('.navbar').removeClass('fixed-top');
    }
});

Это работает, но: Я хочу анимировать переход между исходным и фиксированным верхом. Я попытался установить время перехода на .navbar {}, но это не работает. Нужно ли оборачивать панель навигации в другой div?

1 Ответ

0 голосов
/ 07 мая 2018
let nav = $('.navbar').offset().top;

Создайте переменную для хранения смещения, а затем обновите условие для установки .fixed-top

if ($(window).scrollTop() >= nav) { 
    $('.navbar').addClass('fixed-top'); 
}

Для анимации:

Добавьте новый класс вместе с .navbar-default, скажем animate

.animate{
    transition: top 1s ease-in-out;
}

добавит анимацию easy-in-out к панели навигации.

1s - время анимации, которое можно увеличивать или уменьшать в зависимости от ваших требований.

...