javascript - 滚动到顶部按钮不会淡出

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"); 确实删除了您正在收听 fadeIn 和 fadeOut 的 scroll 事件。

虽然我还没有尝试过，但另一种方法是使用 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