CODEWITHSUNDEEP
javascriptjquerycssif-statementjquery-animate
JordanBarber
JordanBarber

Reputation: 2101

If/Else Jquery Header animations

I am having some trouble with this one. I have the following 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);
    }
});

I am trying to do a series of changes to my header when scrolled past 130 px and then return it to its original state if scrolled back up. Everything works fine if I comment out the else statement, but as soon as I start to add to it, everything breaks. I cannot figure out why. Any help is much appreciated.

Upvotes: 0

Views: 70

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

My guess would be that you're repeatedly calling either the if or the else condition, whereas you just want to call them just once.

Try something like this:

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

As well as checking the scroll position we check whether the header is collapsed or expanded, to ensure the animation is only performed once.

Upvotes: 2

Related Questions