滾動到頂部按鈕將不會fadeOut

Question

我無法讓我的滾動到頂部按鈕來工作。我知道它與另一個動畫有關的問題，但我無法看到是什麼導致了這個問題。問題是當另一個動畫「滾動點擊500時開始」滾動到頂部按鈕將不再消失和消失。

$.chain = function() { 
    var promise = $.Deferred().resolve().promise(); 
    jQuery.each(arguments, function() { 
     promise = promise.pipe(this); 
    }); 
    return promise; 
    }; 

    function scrollTop(){ 
    if(typeof pageYOffset!= 'undefined'){ 
     return pageYOffset; 
    } 
    else{ 
     var b = document.body; //IE 'quirks' 
     var d = document.documentElement; //IE with doctype 
     d = (d.clientHeight)? d : b; 
     return d.scrollTop; 
    } 
    }  

    $(window).on("scroll", function(){ 
    if(scrollTop() >= 600){ 
    $(window).off("scroll"); 
     var animations = $.chain(function() { 
     return $('#animate1 img').fadeIn('slow').delay(400); 
     }, function() { 
     return $('#animate2 img').fadeIn('slow').delay(400); 
     }, function() { 
     return $('#animate3 img').fadeIn('slow'); 
     }); 
    }; 
}); 

jQuery(document).ready(function() { 
var offset = 300; 
var duration = 500; 
jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > offset) { 
     jQuery('.scroll-top').fadeIn(duration); 
    } else { 
     jQuery('.scroll-top').fadeOut(duration); 
    } 
}); 
}); 

謝謝你的幫助。

Answer 1

$(window).off("scroll");確實正在刪除scroll事件，您正在偵聽fadeIn和fadeOut。

雖然我還沒試過，但替代方案是使用event namespacing？像下面

東西：

$.chain = function() { 
    var promise = $.Deferred().resolve().promise(); 
    jQuery.each(arguments, function() { 
     promise = promise.pipe(this); 
    }); 
    return promise; 
    }; 

    function scrollTop(){ 
    if(typeof pageYOffset!= 'undefined'){ 
     return pageYOffset; 
    } 
    else{ 
     var b = document.body; //IE 'quirks' 
     var d = document.documentElement; //IE with doctype 
     d = (d.clientHeight)? d : b; 
     return d.scrollTop; 
    } 
    }  

    $(window).on("scroll.foranimations", function(){ // event name 
    if(scrollTop() >= 600){ 
    $(window).off("scroll.foranimations"); // event name 
     var animations = $.chain(function() { 
     return $('#animate1 img').fadeIn('slow').delay(400); 
     }, function() { 
     return $('#animate2 img').fadeIn('slow').delay(400); 
     }, function() { 
     return $('#animate3 img').fadeIn('slow'); 
     }); 
    }; 
}); 

jQuery(document).ready(function() { 
    var offset = 300; 
    var duration = 500; 
    jQuery(window).on("scroll.forfading", function() { // event name 
     if (jQuery(this).scrollTop() > offset) { 
      jQuery('.scroll-top').fadeIn(duration); 
     } else { 
      jQuery('.scroll-top').fadeOut(duration); 
     } 
    }); 
}); 

通知不同的事件名稱scroll.foranimations和scroll.forfading