Остановите одну функцию в 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);
});

Проверьте демо- скрипку

Answer 1

Я согласен с комментарием Мачи.

Вы можете сделать это следующим образом:

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

проверить демо- скрипку