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

滚动到顶部按钮不会fadeOut

1 个答案: