CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Azy Sır
Azy Sır

Reputation: 165

Why do my nav bars duplicate?

My website is 1 page full of different section divs. I have 1 nav on the home page and then after scrolling passed that another fixed nav fades in.

Sometimes when I scroll up there is a duplication of navs. So the fixed nav is within the normal nav. This is odd because the fixed nav should have disappeared before the normal nav reappeared.

Does anyone have any insight into this? I am using Google Chrome to display code. Could it a chrome issue? 

$(document).on('scroll', function() {    

    if($(this).scrollTop() > $('.nav').outerHeight()){
        $('.nav').hide();
        $('.nav_fixed').fadeIn("slow");
    }

    else if($(this).scrollTop() == $('.nav').position().top) {  
        $('.nav_fixed').hide();
        $('.nav').fadeIn(700);
    }

    else {

    }
});

Upvotes: 0

Views: 95

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

"This is odd because the fixed nav should have disappeared before the normal nav reappeared."

This could be related to the fact that animations are asynchronous. Just because you have your fadeIn() instruction after the hide() instruction doesn't mean that fadeIn() will happen AFTER hide() finishes. Is is actually possible that fadeIn() will happen BEFORE hide() because of the asynchronous nature of the animations.

Try adding the fadeIn() to a completion callback function for hide() as described here:

$(document).on('scroll', function() {    

  if($(this).scrollTop() > $('.nav').outerHeight()){

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen
    // until hide() is finished
    $('.nav').hide(function(){
        $('.nav_fixed').fadeIn("slow");
    });   
  } else if($(this).scrollTop() == $('.nav').position().top) {

    // By encapsulating the instruction for fadeIn() inside of a 
    // function that is then passed as a completion callback to 
    // the hide() method, we ensure that fadeIn() doesn't happen
    // until hide() is finished  
    $('.nav_fixed').hide(function(){
      $('.nav').fadeIn(700);
    });      
  } else {

  }
});

Upvotes: 3

Related Questions