Stop one function in jQuery and run another

Question

I am trying to create a minimize effect on a div that pops up when the page is scrolled down. Everything is fine, just one problem. If the minimize function is complete and I scroll the page up, it restores its original value. I want it in a way that after clicking on the minimize button and scrolling up a bit, it should remain minimized and don't restore.

here is what I am using

$(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);
});

Check the demo fiddle

Answer 1

I agree with the comment of Machiee.

You can do it this way :

$(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');
});

check the demo fiddle