在滾動中動畫頭部，發射次數過多

如何阻止這些css和動畫函數在用戶滾動時運行多次？目前，它們會針對用戶滾動的每個像素點亮，這會導致問題！在滾動中動畫頭部，發射次數過多

<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>

來源

2016-11-07 Martyn Ball

我建議你在你的案例中使用[Waypoints]（http://imakewebthings.com/waypoints/）。 –

我不能安裝任何額外的庫：/ –

然後，您可以設置一個var，每當您第一次更改滾動方向並防止您的函數每次觸發時更改爲true/false。只是一個想法。 –

應該是這樣的：

<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>

我無法測試它，因爲我沒有你的HTML。但是，目的是防止該功能在向下滾動或滾動頂部時觸發兩次。

如果我們將變量top設置爲false，我們第一次讓該函數在向下滾動時觸發。然後，在發生火災後，我們設置爲true，所以如果我們繼續向下滾動，函數將不會執行任何操作。滾動頂部時會發生相同的情況。

來源

2016-11-07 17:33:38

在滾動中動畫頭部，發射次數過多

回答

相關問題