我有一个带有顶级菜单的页面,当用户向下滚动时,该页面会变为最小化版本。我是通过改变元素的类来做到这一点的,所以CSS改变了它的外观。
我想执行一个简单的slideDown / slideUp,因为最小化的菜单栏会同时显示/消失,但只是将动画添加到我当前的代码中并不会像我希望的那样工作。
这是我用来最小化菜单的代码片段:
$(window).scroll(function () {
if ($(document).scrollTop() < topMenuHeight) {
$("nav").removeClass("min");
} else {
$("nav").addClass("min");
}
});
topMenuHeight指的是菜单的高度(显然),并且在代码之前被设置为变量。
我该如何使这项工作?我曾尝试设置一个变量来检查菜单是否被最小化,但它似乎没有用。
感谢任何帮助。虽然,我知道有一些动画插件,但对于这个项目,我想保持它的精益。
感谢您的时间!
答案 0 :(得分:1)
这里有一个使用slideUp和slideDown
的示例CSS
nav {
height: 200px;
background: lightblue;
margin-bottom: 50px;
margin-top: -16px;
}
nav.min {
position: fixed;
height: 80px;
background: red;
}
JQuery的
$(window).scroll(function () {
if($(this).scrollTop() != 0 && !$("nav").hasClass("min"))
{
$("nav").slideUp(function(){
$("nav").addClass("min");
$("nav").slideDown();
});
}
else if($(this).scrollTop() == 0 && $("nav").hasClass("min"))
{
$("nav").slideUp(function(){
$("nav").removeClass("min");
$("nav").slideDown();
});
}
});
FIDDLE
答案 1 :(得分:0)
这个(添加一个停止点)似乎已经解决了这个问题:
$(window).scroll(function () {
if ($(document).scrollTop() < topMenuHeight+100) {
$("nav").stop().animate({
top: "-4em"
}, 200, function() {
$("nav").removeClass("min");
});
} else {
$("nav").addClass("min");
$("nav").stop().animate({
top: 0
}, 200 );
}
});
});