在jQuery中停止一个函数并运行另一个函数

Question

我试图在页面向下滚动时弹出的div上创建最小化效果。一切都很好，只是一个问题。如果最小化功能完成，并且向上滚动页面，它将恢复其原始值。我希望它在点击最小化按钮并向上滚动一点之后，应该保持最小化并且不会恢复。

这里是我使用

$(function() { 
    $(window).scroll(function() { 
     var height = $(window).height() /2; 
     if ($(this).scrollTop() >= height) { 
      $("#box").animate({'bottom':'0px'},300); 
     } 
     else { 
      $("#box").stop(true).animate({'bottom':'-150px'},100); 
     } 
}); }); 

$('.minimize').toggle(function() { 
    $('#box').animate({'bottom':'-80px'},200);}, 
    function() { $('#box').animate({'bottom':'0px'},200); 
}); 

检查演示fiddle

Answer 1

我Machiee的评论表示赞同。

你可以这样来做：

$(function() { 
    $(window).scroll(function (e) { 
     if($('#box').hasClass('minimized')) 
      return; 
     var height = $(window).height() /2; 
     if ($(this).scrollTop() >= height) { 
      $("#box").animate({'bottom':'0px'},300); 
     } 
     else { 
      $("#box").stop(true).animate({'bottom':'-150px'},100); 
     } 
}); }); 

$('.minimize').toggle(function() { 
    $('#box').animate({'bottom':'-80px'},200); 
    $('#box').addClass('minimized'); 
}, 
    function() { $('#box').animate({'bottom':'0px'},200); 
       $('#box').removeClass('minimized'); 
}); 

检查演示fiddle