Javascript JS/JQuery更改类和向下/向上滑动

我有一个带有顶部菜单的页面，当用户向下滚动时，它会变成最小化版本。我通过改变元素的类来实现这一点，因此CSS改变了它的外观

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

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

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

$（窗口）。滚动（函数（）{
if（$（文档）.scrollTop（）

topMenuHeight指的是菜单的高度（很明显），在代码之前被设置为一个变量

我怎样才能做到这一点？我试着设置一个变量来检查菜单是否最小化，但它似乎不起作用

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

---

谢谢你抽出时间

这里有一个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();
        });    
     }
});

拨弄

---

这里有一个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();
        });    
     }
});

拨弄

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

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

$（窗口）。滚动（函数（）{
if（$（文档）.scrollTop（）

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

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

$（窗口）。滚动（函数（）{
if（$（文档）.scrollTop（）

这是我尝试过的，但是当我第一次向下滚动时，它没有改变类，而是向上滑动展开的菜单（因此它消失了）；然后，当我不断滚动时，它会向上滑动最小化版本，或者我需要以不同的方式触发类更改。我想这是因为它都是相同的元素。我宁愿不添加任何无关的标记。你还有别的想法吗？非常感谢。代码有一些复杂性，我将尝试精简它并将其发布到那里。但我找到了一个解决办法。我将“min”类设置为具有负的顶部值，然后在JS scroll触发器上，我将顶部属性设置为0。它是有效的，但不是100%的，有时会出现，然后又消失。。。我认为我触发滚动的方式造成了一些麻烦。这里是：它可以正常工作，但是当你上下滚动时，它非常麻烦。谢谢你的关注@工作内容好的，我明天早上看一下，然后再给你回复。看起来很棒，非常感谢！我会给你上一票，但我是新用户，Stackoverflow不会让我上一票。：）这是我尝试过的，但是当我第一次向下滚动时，它没有改变类，而是向上滑动展开的菜单（所以它消失了）；然后，当我不断滚动时，它会向上滑动最小化版本，或者我需要以不同的方式触发类更改。我想这是因为它都是相同的元素。我宁愿不添加任何无关的标记。你还有别的想法吗？非常感谢。代码有一些复杂性，我将尝试精简它并将其发布到那里。但我找到了一个解决办法。我将“min”类设置为具有负的顶部值，然后在JS scroll触发器上，我将顶部属性设置为0。它是有效的，但不是100%的，有时会出现，然后又消失。。。我认为我触发滚动的方式造成了一些麻烦。这里是：它可以正常工作，但是当你上下滚动时，它非常麻烦。谢谢你的关注@工作内容好的，我明天早上看一下，然后再给你回复。看起来很棒，非常感谢！我会给你上一票，但我是新用户，Stackoverflow不会让我上一票。：）