JQuery остановить анимацию, если условие - PullRequest
Новая
       26

JQuery остановить анимацию, если условие

1 голос
/ 12 января 2012

Я создаю веб-сайт, используя различные @ media (min-width, max-width) , чтобы показать веб-сайт идеально на главном устройстве.

У меня есть меню, которое следует заверхняя часть экрана при прокрутке, и это код jQuery: 

var win_width = $(window).width();

        if (win_width >= 751) {
            var el = $('div.menu-header');
            var elpos_original = el.offset().top;
            $(window).scroll(function(){
                var elpos = el.offset().top;
                var windowpos = $(window).scrollTop();
                var finaldestination = windowpos;
                if(windowpos<elpos_original) {
                    finaldestination = elpos_original;
                    el.stop().css({'top':0});
                } else {
                    el.stop().animate({'top':finaldestination-elpos_original+30},500);
                }
            });
        }
    }

Он работает нормально, но если я изменю размер окна на 750 пикселей, я бы хотел остановить эту функцию и восстановить var el в исходное положение.

1 Ответ

1 голос
/ 12 января 2012

Обратите внимание, функция, данная для прокрутки, будет вызываться немедленно всякий раз, когда пользователь будет прокручивать 

var el = $('div.menu-header'),
elpos_original = el.offset().top;
$(window).scroll (function() {
    var win_width = $(this).width();
      if (win_width >= 751) {
        var elpos = el.offset().top;
        var windowpos = $(this).scrollTop();
        var finaldestination = windowpos;
        if(windowpos<elpos_original) {
            finaldestination = elpos_original;
            el.stop().css({'top':0});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original+30},500);
        }
    } else {
         $(this).resize(); // calling to handle declared below. 
    }
}).resize( function() { 
       // Check when resizing whether size is at most 750
       // and restore original position;
       if( $(this).width() <=750 ) { 
          el.stop().css( "top", "0" )
       }
} )
...