我正在尝试为粘性导航制作动画 - 我想要做的是让它平滑地反弹。我该怎么做?
我有以下 .js 脚本:
var mn = $(".menu");
mns = "menu-scrolled";
hdr = $('.menu').height() + $('.navigation').height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
我使用以下代码作为引用:http://codepen.io/Guilh/pen/JLKbn
最佳答案
我们可以使用 css 动画来为导航的 top
属性设置动画:
.main-nav-scrolled {
-webkit-animation:bounce 0.5s forwards;
}
@-webkit-keyframes bounce {
from {
top: -200px;
}
to {
top: 0;
}
}
每当通过 javascript 添加 .main-nav-scrolled
类时,nav 将平滑地向下滑动。
还要记住浏览器前缀。
关于jquery - 动画粘性导航?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30545108/