Animieren Header auf Bildlauf, feuern zu oft

Question

Wie kann ich diese CSS und animieren Funktionen mehr als einmal zu stoppen, wenn der Benutzer scrollt? Derzeit feuern sie für jeden Pixel, den der Benutzer scrollt, dies verursacht Probleme!

<script> 
    var elementPosition = $('#main-wrap').offset(); 
    var x = 0; 

    $(window).scroll(function(){ 
    if($(window).scrollTop() > elementPosition.top && x != 0){ 
     $('#dropdown-navwrap .dropdown-bar').animate({ width: "80%", overflow: "visible" }, 400); 
     $('#header').animate({ top: "44px" }, 400, function() { $(this).animate("padding", "0"); }); 

     $('#hdr-logo').animate({ opacity: "0" }, 400, function() { $(this).css("display", "none"); }); 
     $("#hdr-social").animate({ opacity: "0" }, 400, function() { $(this).css("display", "none"); }); 
     $(".contact-box").animate({ opacity: "0" }, 400, function() { 
     $(this).css("display", "none"); ($('#header').css("height", "30px")).css("padding", "0px"); 
     // logo 
     ($('#sticky-contact').css("display", "block")).animate({opacity: 1.0}); 
     $("a[href*=logo-sticky]").animate({opacity: 1.0}); 
     }); 
    } else { 
     $('#dropdown-navwrap .dropdown-bar').animate({ width: "100%", overflow: "visible" }, 400); 

     $('#hdr-logo').animate({ opacity: "1" }, 400, function() { $(this).css("display", "visible"); }); 
     $("#hdr-social").animate({ opacity: "1" }, 400, function() { $(this).css("display", "visible"); }); 
     $(".contact-box").animate({ opacity: "1" }, 400, function() { 
     $(this).css("display", "visible"); ($('#header').css("height", "95px")).css("padding", "15px 0"); 
     // logo 
     ($('#sticky-contact').animate({opacity: 0})).css("display", "none"); 
     $("a[href*=logo-sticky]").animate({opacity: 0}); 
     }); 
    } 
    }); 
</script> 

Answer 1

Es sollte wie folgt sein:

<script> 
var elementPosition = $('#main-wrap').offset(); 
var x = 0; 
var top = false; 

$(window).scroll(function() { 
    if ($(window).scrollTop() > elementPosition.top && x != 0) { 
     if (top == false) { 
      $('#dropdown-navwrap .dropdown-bar').animate({width: "80%", overflow: "visible"}, 400); 
      $('#header').animate({top: "44px"}, 400, function() { 
       $(this).animate("padding", "0"); 
      }); 

      $('#hdr-logo').animate({opacity: "0"}, 400, function() { 
       $(this).css("display", "none"); 
      }); 
      $("#hdr-social").animate({opacity: "0"}, 400, function() { 
       $(this).css("display", "none"); 
      }); 
      $(".contact-box").animate({opacity: "0"}, 400, function() { 
       $(this).css("display", "none"); 
       $('#header').css("height", "30px").css("padding", "0px"); 
       $('#sticky-contact').css("display", "block").animate({opacity: 1.0}); 
       $("a[href*=logo-sticky]").animate({opacity: 1.0}); 
      }); 
      top = true; 
     } 
    } else { 
     if (top == true) { 
      $('#dropdown-navwrap .dropdown-bar').animate({width: "100%", overflow: "visible"}, 400); 

      $('#hdr-logo').animate({opacity: "1"}, 400, function() { 
       $(this).css("display", "visible"); 
      }); 
      $("#hdr-social").animate({opacity: "1"}, 400, function() { 
       $(this).css("display", "visible"); 
      }); 
      $(".contact-box").animate({opacity: "1"}, 400, function() { 
       $(this).css("display", "visible"); 
       $('#header').css("height", "95px").css("padding", "15px 0"); 
       $('#sticky-contact').animate({opacity: 0}).css("display", "none"); 
       $("a[href*=logo-sticky]").animate({opacity: 0}); 
      }); 
      top = false; 
     } 
    } 
}); 
</script> 

Ich kann es nicht testen, da ich Ihre HTML nicht haben. Der Zweck besteht jedoch darin, zu verhindern, dass die Funktion beim Scrollen oder Scrollen zweimal ausgelöst wird.

Wenn wir die Variable top zum ersten Mal auf false setzen, lassen wir die Funktion während des Scrollens ablaufen. Dann, nach Bränden, setzen wir true, wenn wir weiter scrollen, wird die Funktion nichts tun. Wird beim Scrollen oben gleich passieren.