If / Else Jquery Header动画

时间:2015-03-10 02:51:32

标签: javascript jquery css if-statement jquery-animate

我遇到这个问题。我有以下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语句,一切正常,但是一旦我开始添加它,一切都会中断。我无法弄清楚为什么。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

我的猜测是你反复拨打ifelse条件,而你只想打电话给他们一次。

尝试这样的事情:

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...
  }
});

除了检查滚动位置,我们还会检查标题是折叠还是展开,以确保动画只执行一次。