CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user802609
user802609

Reputation: 809

Jquery - ScrollTop delayed.. a lot

I'm working on a super simple site (or so I thought), and I'm trying to use JQuery's ScrollTop for the top nav bar. I'm running into a problem though.

So when I scroll down, past 50, everything works fine. The navbar shrinks and everything like it is supposed to. But.. The problem is when I scroll back up to the top. I have an else statement that says if the scroll position is less than 50, it should animate back to the demensions that it originally was. It does do this, but it has a 10 second(ish) delay after scrolling to the top. I cannot figure out what could be wrong.

Here is my JQuery code:

$(window).scroll(function(){
          if ($(this).scrollTop() > 50) {
              $('.co_name').animate({ fontSize: '22pt', paddingTop: '18px', paddingBottom: '0px'}, 530);
          }  else {
            $('.co_name').animate({ fontSize: '40pt', paddingTop: '80px', paddingBottom: '75px'}, 530);
          }
      });

I dont see anything wrong there, but again this is my first time using ScrollTop... You can see the entire site working at studionice.co/u/flatresponsive.

Any ideas?

Also, sometimes the original animation is delayed when I scroll down. I have used JQuery in the past and it's usually super fast. Could it be all the junk I have in my source? I'm messing around and currently have Font Awesome, Bootstrap, and Flat UI integrated with it.

Upvotes: 0

Views: 832

Answers (1)

Marcelo Waisman
Marcelo Waisman

Reputation: 596

when you are scrolling jquery triggers the event many times each time it triggers jquery takes 530 milliseconds to finish the animation so if you scroll down 10 times it will use 5.3 seconds and scroll up 10 more times another 5.3 seconds to finish all animations you should implement a lock , so the animation happens only once when scrollTop() > 50 and only once when scrollTop() <= 50 something like this:

var animateLock = 0;
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
        if (animateLock == 0) {
            animateLock = 1;
            $('.co_name').animate({ fontSize: '22pt', paddingTop: '18px', paddingBottom:'0px'}, 530);
        }
    }  else {
        if (animateLock == 1) {
            animateLock = 0;
            $('.co_name').animate({ fontSize: '40pt', paddingTop: '80px', paddingBottom: '75px'}, 530);
        }
    }
  });

notice: I didn't actually ran this code

Upvotes: 1

Related Questions