анимировать ширину div при прокрутке

Question

Прежде всего, я новичок в jquery, и я не очень хорош в этом. У меня есть div с фиксированной шириной, и я хочу, чтобы он расширялся до полной ширины при прокрутке вниз. До сих пор у меня есть код ниже:

var fullwidth = $(window).width(); 
var smallwidth = 1100; 

$(window).scroll(function(){  
    if ($(window).scrollTop() > 0) { 
     $('#navigation').animate({width: fullwidth}, 1000); 
    } else { 
     $('#navigation').animate({width: smallwidth}, 1000); 
    } 
}); 

Что это делает, что она будет расширяться, когда вы крутите, но она не будет сжиматься, когда вы снова прокручивая весь путь сверху. Когда я использую fadeOut и fadeIn, он работает отлично. Некоторая помощь будет принята с благодарностью!

Gr, Томас

Answer 1

$ (окно) .scroll() does't работать "в режиме реального времени", но на самом деле это срабатывает каждые пару мс или больше. я предлагаю вам взглянуть на throttle/debounce jQuery plugin

Я немного макет, на jsfiddle, вы можете найти его здесь:

jsfiddle

Код довольно понятно, я думаю. В принципе, плагин debounce запускает функцию обратного вызова каждые 250 мс, даже если последний триггер прокрутки окна был вызван менее чем за 250 мс назад.

JS:

var fullwidth = $(window).width(); 
var smallwidth = 1100; 

$(window).scroll($.throttle(250, animate)) 

function animate() { 
    var navi = $('#navigation'); 
    //we're adding .wide class to avoid multiple runs of this animation. 
    if (window.pageYOffset > 0 && !navi.hasClass('wide')) { 
     navi.addClass("wide").stop().animate({width: fullwidth}, 1000); 
    } 

    if (window.pageYOffset == 0) { 
     console.clear(); 
     console.log(smallwidth); 
     navi.stop().animate({width: smallwidth}, 1000, function() { 
      $(this).removeClass('wide'); 
     }); 
    }   
} 

Answer 2

Спасибо за ваш awnser, я получил это работает сейчас Я до сих пор не совсем понимаю, почему мой код не работал. Он работал с fadeIn/fadeOut, но не с анимацией, что кажется немного странным.

Еще одна вещь, есть ли решение без использования плагина jQuery для дросселя/debounce?

Answer 3

Кроме того, я получил его, чтобы добавить .stop() перед .animate(). Однако это то, что при прокрутке анимации заикается во время каждого действия прокрутки. Я привел пример ниже.

http://jsfiddle.net/et8hghuw/

$(window).on("load resize", function() { 
 
    var fullwidth = $(window).width(); 
 
    if ($(window).width() >= 500) { 
 
    var smallwidth = 500; 
 
    } else { 
 
    var smallwidth = $(window).width(); 
 
    } 
 
    if ($(window).scrollTop() > 0) { 
 
    $('#navigation').css('width', fullwidth); 
 
    } else { 
 
    $('#navigation').css('width', smallwidth); 
 
    } 
 
}); 
 

 
$(window).scroll(function() { 
 
    var fullwidth = $(window).width(); 
 
    if ($(window).width() >= 500) { 
 
    var smallwidth = 500; 
 
    } else { 
 
    var smallwidth = $(window).width(); 
 
    } 
 
    if ($(window).scrollTop() > 0) { 
 
    $('#navigation').stop().animate({ 
 
     width: fullwidth 
 
    }, 200); 
 
    } else { 
 
    $('#navigation').stop().animate({ 
 
     width: smallwidth 
 
    }, 200); 
 
    } 
 
});

Любой способ избавления от этого заикания?