如何在滾動上只運行一次jQuery動畫？

Question

我正嘗試使用Javascript來檢測用戶在我的網站上向下滾動超過一定高度時的情況，然後當他們到達滾動斷點時，我的「社交」圖標就會淡入。

我想弄清楚的是我怎麼才能運行fadeTo一旦alpha命中1並鎖定它？因此，當用戶再次上下滾動時，fadeIn不會一遍又一遍地發生，除非它們啓動頁面重新載入，這會重置所有內容。

//SCROLL 
$(window).on("scroll", function() { 
//SOCIAL ICONS 
if ($(this).scrollTop() > 1750) { 
    $(".img-social .gith").stop(true).fadeTo(250, 1); 
    $(".img-social .inst").stop(true).fadeTo(450, 1); 
    $(".img-social .twit").stop(true).fadeTo(650, 1); 
    $(".img-social .drib").stop(true).fadeTo(850, 1); 
    $(".img-social .link").stop(true).fadeTo(1050, 1); 
} else { 
    $(".img-social .gith").stop(true).fadeTo(10, 0); 
    $(".img-social .inst").stop(true).fadeTo(10, 0); 
    $(".img-social .twit").stop(true).fadeTo(10, 0); 
    $(".img-social .drib").stop(true).fadeTo(10, 0); 
    $(".img-social .link").stop(true).fadeTo(10, 0); 
} 
}); 

感謝

Answer 1

只要把下面的第一個if條件off的scroll事件中的代碼，一旦你運行該代碼：

$(window).on("scroll.socialIcon", function() { 
    if ($(this).scrollTop() > 1750) { 
     // ... 
     $(window).off("scroll.socialIcon"); // last line 
    } else { 
     //... 
    } 
}); 

因此，scroll.socialIcon（名稱空間）事件不再響應。

Answer 2

使用Boolean記錄是否是發生與否：

// SET BOOLEAN 
var scrolled = false; 

//SCROLL 
$(window).on("scroll", function() { 
//SOCIAL ICONS 
    if ($(this).scrollTop() > 1750 && !scrolled) { 
     $(".img-social .gith").stop(true).fadeTo(250, 1); 
     $(".img-social .inst").stop(true).fadeTo(450, 1); 
     $(".img-social .twit").stop(true).fadeTo(650, 1); 
     $(".img-social .drib").stop(true).fadeTo(850, 1); 
     $(".img-social .link").stop(true).fadeTo(1050, 1); 
     scrolled = true; 
    } else { 
     $(".img-social .gith").stop(true).fadeTo(10, 0); 
     $(".img-social .inst").stop(true).fadeTo(10, 0); 
     $(".img-social .twit").stop(true).fadeTo(10, 0); 
     $(".img-social .drib").stop(true).fadeTo(10, 0); 
     $(".img-social .link").stop(true).fadeTo(10, 0); 
     scrolled = false; 
    } 
});