If/Else Jquery Header 动画

Question

我遇到了一些麻烦。我有以下 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 像素时对 header 进行一系列更改，然后在向上滚动时 return 将其恢复到原始状态。如果我注释掉 else 语句，一切正常，但一旦我开始添加它，一切都会中断。我不知道为什么。非常感谢任何帮助。

Answer 1

我的猜测是您重复调用 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...
  }
});

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

If/Else Jquery Header 动画

If/Else Jquery Header animations

javascript

jquery

css

if-statement

jquery-animate