动画切换固定顶部导航栏

Question

使用mdbootstrap我有导航栏：

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

它定位如下：

滚动时，我添加了“固定顶部”＆＃39;使用此脚本导航到导航栏：

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

这有效但是： 我希望为原始状态和固定顶级状态之间的过渡设置动画。我尝试将转换时间设置为.navbar {}，但它不起作用。我是否需要将导航栏包装到另一个div中？

Answer 1

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是动画的时间，您可以根据需要增加或减少。