0

使用 mdbootstrap 我有导航栏:

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

它的定位是这样的: 在此处输入图像描述

滚动时,我使用此脚本将“固定顶部”类添加到导航栏:

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

这可行,但是:我想为原始状态和固定顶部状态之间的过渡设置动画。我尝试将过渡时间设置为 .navbar{} 但它不起作用。我需要将导航栏包装到另一个 div 中吗?

4

1 回答 1

3
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;
}

它将向导航栏添加缓入出动画。

1s是动画的时间,你可以根据你的要求增加或减少。

于 2018-05-07T08:19:40.227 回答