CODEWITHSUNDEEP
jqueryhtmlcss
marchemike
marchemike

Reputation: 3277

hiding and showing footer keeps on repeating on scroll

I'm trying to hide my footer whenever I scroll downward. What I do is that I make a slideDown animation then a hide function after it. But when I start scrolling down, it repeats the process and it becomes irritating. How do I make it only do it once after it is run once?

This is my code-

$('.empdetalye').scroll(function (event) {
var scroll = $('.empdetalye').scrollTop();
if(scroll > 50){
$('.footer').slideDown("slow", function() {
    // Animation complete.
    $('.footer').hide();
  });

}
if(scroll < 50){
$('.footer').slideUp("slow", function() {
    // Animation complete.
    $('.footer').show();
  });

}
});

Should I add something else to prevent it from repeating??

Upvotes: 0

Views: 71

Answers (1)

albusshin
albusshin

Reputation: 4010

Add a boolean value to check if the footer is hidden.

$('.empdetalye').scroll(function (event) {
var scroll = $('.empdetalye').scrollTop(),
    isHidden = false;
if(scroll > 50 && !isHidden){
$('.footer').slideDown("slow", function() {
    // Animation complete.
    $('.footer').hide();
    isHidden = true;
  });

}
if(scroll < 50 && isHidden){
$('.footer').slideUp("slow", function() {
    // Animation complete.
    $('.footer').show();
    isHidden = false;
  });

}
});

This should do the trick.

Upvotes: 1

Related Questions