Javascript If/Else Jquery头动画

我在这件事上遇到了一些麻烦。我有以下javascript

$(window).on('scroll', function() {
    scrollPosition = $(this).scrollTop();
    if (scrollPosition >= 130) {
        header.animate({height: '51px'}, 500);
        mainNav.css("display", "none");
        logo.fadeOut("fast");
        scrollLogo.delay(300).slideDown("fast");
        $(this).off('scroll');
    }
    else {
        header.animate({height: '130px'}, 500);
    }
});

---

当滚动超过130像素时，我试图对我的标题进行一系列的更改，然后如果向后滚动，则将其返回到其原始状态。如果我注释掉else语句，一切都正常，但一旦我开始添加，一切都会中断。我不明白为什么。非常感谢您提供的任何帮助。

我猜您反复调用

if

或

else

条件，而您只想调用它们一次

试着这样做：

var compactHeader = false;
$(window).on('scroll', function() {
  scrollPosition = $(this).scrollTop();
  if (scrollPosition >= 130 && !compactHeader) {
    compactHeader = true;
    // Code to collapse header...
  } else if (scrollPosition < 130 && compactHeader) {
     compactHeader = false;
     // Code to expand header...
  }
});

var compactHeader=false；
$（窗口）.on（'scroll'，function（）{
scrollPosition=$（this.scrollTop（）；
如果（scrollPosition>=130&&！compactHeader）{
compactHeader=true；
//折叠标题的代码。。。
}else if（滚动位置<130&&compactHeader）{
compactHeader=false；
//展开标题的代码。。。
}
});

除了检查滚动位置外，我们还检查标题是否折叠或展开，以确保动画只执行一次