Question

我有一个带有顶级菜单的页面，当用户向下滚动时，该页面会变为最小化版本。我是通过改变元素的类来做到这一点的，所以CSS改变了它的外观。

我想执行一个简单的slideDown / slideUp，因为最小化的菜单栏会同时显示/消失，但只是将动画添加到我当前的代码中并不会像我希望的那样工作。

这是我用来最小化菜单的代码片段：

$(window).scroll(function () {
    if ($(document).scrollTop() < topMenuHeight) {
        $("nav").removeClass("min");      
    } else {
        $("nav").addClass("min");
    } 
});

topMenuHeight指的是菜单的高度（显然），并且在代码之前被设置为变量。

我该如何使这项工作？我曾尝试设置一个变量来检查菜单是否被最小化，但它似乎没有用。

感谢任何帮助。虽然，我知道有一些动画插件，但对于这个项目，我想保持它的精益。

感谢您的时间！

Answer 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

http://jsfiddle.net/VD6wf/22/

Answer 2

这个（添加一个停止点）似乎已经解决了这个问题：

$(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 );
  } 
 });
});

JS / JQuery更改类和SlideDown / Up

2 个答案: