[英]Animate toggled fixed-top navbar
Using the mdbootstrap I have navbar: 使用mdbootstrap我有导航栏:
<nav class="navbar navbar-expand-lg white">
And it is positioned like this: 它的位置是这样的:
While scrolling I add the 'fixed-top' class to the navbar with this script: 滚动时,我使用以下脚本将“ fixed-top”类添加到导航栏:
let nav = $('.navbar').offset().top;
$(window).bind('scroll', function () {
if ($(window).scrollTop() >= nav) {
$('.navbar').addClass('fixed-top');
} else {
$('.navbar').removeClass('fixed-top');
}
});
This works but: I want to animate the transition between the original and the fixed-top state. 这可行,但是:我想为原始状态和固定状态之间的过渡设置动画 。 I tried with setting a transition time to .navbar{} but it does not work.
我尝试将过渡时间设置为.navbar {},但是它不起作用。 Do I need to wrap the navbar into another div?
我是否需要将导航栏包装到另一个div中?
let nav = $('.navbar').offset().top;
Make a variable to store the offset and then update the condition for setting .fixed-top
制作一个变量来存储偏移量,然后更新设置
.fixed-top
的条件
if ($(window).scrollTop() >= nav) {
$('.navbar').addClass('fixed-top');
}
To animated: 动画:
Add a new class along with .navbar-default
, say animate
添加一个新类以及
.navbar-default
,例如animate
.animate{
transition: top 1s ease-in-out;
}
it will add an ease-in-out animation to the navbar. 它将向导航栏添加一个缓入动画。
1s
is the time for animation, you can increase or decrease depending on your requirement. 1s
是动画时间,您可以根据需要增加或减少。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.